——那些被我忽略的CSS属性选择器——
E[foo~="bar"]
属性选择器
①定义：选择匹配E的元素，且该元素定义了foo属性，foo属性值是一个包含‘bar’且以空格分隔的列表；
②注：E选择符可省略，表示选择定义了foo属性，foo属性值是一个包含‘bar’且以空格分隔的列表的任意类型元素
③示例：a[title~="bar1"]匹配<a title="bar1 bar2 bar3"></a>，而不匹配<a title="bar2 bar3 bar4"></a>
E[foo|="en"]
属性选择器
①定义：选择匹配E的元素，且该元素定义了foo属性，foo属性值是一个含有连字符（-）且开头字符是"en"的值；
②注：E选择符可省略，定义类似上一个选择器
③示例：[lang|="en"]匹配<body lang="en-us"></body>，而不匹配<body lang="fr-argot"></body>
E:first-child
结构伪类选择器
定义：选择匹配E的元素，且该元素为E元素的第一个子元素
E:lang(fr)
:lang()伪类选择器
定义：选择匹配E的元素，且该元素显示内容的语言类型为fr
E::before
伪元素选择器
定义：在匹配E的元素前插入内容
E::after
伪元素选择器
定义：在匹配E的元素后插入内容
E > F
子包含选择器
①定义：选择匹配F的元素，且F元素为所匹配E元素的子元素
②注：E和F不仅仅是指类选择器，可以是任意合法的选择器组合
E + F
相邻兄弟选择器
①选择匹配F的元素，且F元素位于所匹配的E元素后面相邻位置
②注：E和F不仅仅是类选择器，可以是任意合法的选择器的组合
——CSS3新增属性选择器（^：起始字符匹配 $：终止字符匹配 *：任意字符匹配）——
E[foo^="bar"]
①定义：选择匹配E的元素，且该元素定义了foo属性，foo属性值包含前缀为"bar"的子字符串
②注：E选择符可省略，表示可匹配任意含有foo属性且该属性值含有前缀为"bar"的子字符串的元素
③示例：body[lang^="en"]匹配<body lang="en-us"></body>,不匹配<body lang="fr-argot"></body>
E[foo$="bar"]
①定义：选择匹配E的元素，且该元素定义了foo属性，foo属性值包含后缀为"bar"的子字符串
②注：E选择符可省略，表示可匹配任意含有foo属性且该属性值含有后缀为"bar"的子字符串的元素
③示例：img[src$="jpg"]匹配<img src="pic.jpg"/>，不匹配<img src="pic.gif"/>
E[foo*="bar"]
①定义：选择匹配E的元素，且该元素定义了foo属性，foo属性值包含"bar"的字符串
②注：E选择符可省略，表示可匹配任意含有foo属性且该属性值含有"bar"的字符串的元素
③示例：a[href*="baidu"]匹配<a href="www.baidu.com"></a>，不匹配<a href="www.mi.com"></a>
——CSS3新增结构伪类选择器——
E:root
①定义：匹配文档中的根元素；
②注：在(X)HTML中，根元素始终是HTML元素
③示例：（设置HTML文档的背景色）
:root
{
background:#ff0000;
}
①定义：选择所有在其父元素中第n个位置，且匹配E的子元素。
（参数n可以是数字【1、2、.....】、关键字【odd（奇数）、even（偶数）】、公式（2n，2n+1，......））
②注：参数索引起始值是1，非0
③示例：tr:nth-child(3) 匹配所有表格里排第3行的tr元素
tr:nth-child(2n+1) 等价于 tr:nth-child(odd) 匹配所有表格中的奇数行
tr:nth-child(2n)等价于 tr:nth-child(even) 匹配所有表格中的偶数行
E:nth-last-child(n)
①定义：选择所有在其父元素中倒数第n个位置，且匹配E的子元素
②注：该选择器的计算顺序跟E:nth-child(n)刚好相反，但语法、用法一样
E:nth-of-type(n)
①定义：选择父元素中第n个位置匹配E的子元素
（结合下面“注”可理解成，匹配分离出来的E子元素的第n个E元素）
②注：所有匹配E的子元素被分离出来单独排序，非E的子元素不参与排序
参数n的取值与E:nth-child(n)一致
③示例：如下代码中，p:nth-of-type(2)匹配第2个p元素，而不是位于第2个位置的p元素
<div>
<h1>title</h1>
<p>the first p</p> <!-- 第2个位置的P元素 -->
<p>the second p</p> <!-- 第2个P元素 -->
</div>
E:nth-last-of-type(n)
①定义：选择父元素中倒数第n个位置，且匹配E的子元素
②注：计算顺序与E:nth-of-type(n)相反，但语法、用法一样
E:last-child
①定义：选择位于其父元素中最后一个位置，且匹配E的子元素
②示例：在如下代码中，h1:last-child匹配第二个（最后一个）h1元素
<div>
<p>第一个P元素</p>
<h1>第一个h1元素</h1>
<h1>第二个（最后一个）h1元素</h1><!-- 匹配此处 -->
</div>
E:first-of-type 等价于 E:nth-of-type(1)
E:last-of-type 等价于 E:nth-last-of-type(1)
E:only-child
①定义：选择其父元素只含有一个子元素且该子元素匹配E的元素
②示例：p:only-child 匹配
<div>
<p>一个p元素</p>
</div>
片段中的p元素，但不匹配
<div>
<p>第一个p元素</p>
<p>第二个p元素</p>
</div>
E:only-of-type
①定义：选择其父元素只含有一个匹配E元素的子元素
②示例：p:only-of-type匹配
<div>
<p>一个也是唯一一个p元素</p>
</div>
片段中的p元素，也匹配
<div>
<h1>我是h1元素</h1>
<p>一个也是唯一一个p元素</p>
</div>
E:empty
①定义：选择匹配E的元素，且该元素不含子节点
②注：文本也属于节点
③示例：
<div>
<p>第一个p元素</p>
<p></p><!-- p:empty匹配此处 -->
</div>
——为了方便记忆，可将结构伪类选择器分成四大类——
①通用子元素过滤器：E:nth-child(n) （顺序过滤）和E:nth-last-child(n)（倒序过滤）
②通用子类型元素过滤器：E:nth-of-type(n)（顺序过滤）和E:nth-last-of-type(n)（倒序过滤）
③特定位置子元素：如以子元素为参考的：E:first-child和E:last-child，以子元素类型为参考的：E:first-of-type和E:last-of-type
④特定状态的元素：如E:root（根节点）、E:only-child（独子元素）、E:only-of-type（独子类型元素）和E:empty（孤节点）
——谈谈E:nth-child和E:nth-of-type的区别——
从定义上来看，两者区别不大。但是两者实际却在用法上有很大区别：
E:nth-child --> 选择父元素的第n个位置的元素，且该元素必须匹配E，否则不成功匹配。
例如：p:nth-child(1)无法匹配如下代码中的p元素，因为第一个位置的是h1元素
<div>
<h1></h1>
<p></p>
</div>E:nth-of-type --> 选择父元素的第n个位置的E元素（在将父元素中的E元素进行排序后的位置）
例如：p:nth-of-type(1)匹配下面代码中的第一个p元素
<div>
<h1></h1>
<p></p> <!-- 匹配此处的p -->
<p></p>
</div>
467
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
