新增选择器
|
选择符类型 |
表达式 |
描述 |
|
子串匹配的属性选择符 |
E[att^="val"] |
匹配具有att属性、且值以val开头的E元素 |
|
E[att$="val"] |
匹配具有att属性、且值以val结尾的E元素 |
|
|
E[att*="val"] |
匹配具有att属性、且值中含有val的E元素 |
|
|
结构性伪类 |
E:root |
匹配文档的根元素。在HTML（标准通用标记语言下的一个应用）中，根元素永远是HTML |
|
E:nth-child(n) |
匹配父元素中的第n个子元素E |
|
|
E:nth-last-child(n) |
匹配父元素中的倒数第n个结构子元素E |
|
|
E:nth-of-type(n) |
匹配同类型中的第n个同级兄弟元素E |
|
|
E:nth-last-of-type(n) |
匹配同类型中的倒数第n个同级兄弟元素E |
|
|
E:last-child |
匹配父元素中最后一个E元素 |
|
|
E:first-of-type |
匹配同级兄弟元素中的第一个E元素 |
|
|
E:only-child |
匹配属于父元素中唯一子元素的E |
|
|
E:only-of-type |
匹配属于同类型中唯一兄弟元素的E |
|
|
E:empty |
匹配没有任何子元素（包括text节点）的元素E |
|
|
目标伪类 |
E:target |
匹配相关URL指向的E元素 |
|
UI元素状态伪类 |
E:enabled |
匹配所有用户界面（form表单）中处于可用状态的E元素 |
|
E:disabled |
匹配所有用户界面（form表单）中处于不可用状态的E元素 |
|
|
E:checked |
匹配所有用户界面（form表单）中处于选中状态的元素E |
|
|
E::selection |
匹配E元素中被用户选中或处于高亮状态的部分 |
|
|
否定伪类 |
E:not(s) |
匹配所有不匹配简单选择符s的元素E |
|
通用兄弟元素选择器 |
E ~ F |
匹配E元素之后的F元素 |
E:nth-child(n)示例：
其中参数n可以是数字、关键字（even、odd）、公式（2n,2n+3），参数的索引起始值为1，不是0（没有第0个子元素）。
tr:nth-child(3)匹配所有表格里第三行的tr元素；
tr:nth-child(2n)匹配所有表格的偶数行；
tr:nth-child(2n+1)匹配所有表格的奇数行；
tr:nth-child(odd)匹配所有表格的奇数行；
tr:nth-child(even)匹配所有表格的偶数行。
E:only-child示例：
<div>
<p>p</p>
</div>
p:only-child{background: blue;}
为作为其父类唯一一个子元素的p元素添加背景颜色，也就是这个p元素不能有兄弟。
E:empty示例：
<p></p><!--它会被添加蓝色背景-->
<p> </p><!--有空格、回车都不可以-->
p:empty{background: blue;}
为没有子元素的p元素添加背景颜色，注意：p元素内也不能有文字内容，文字也属于节点（包括空格、回车）。
E:target示例：
p:target{background: blue;}
<a href="#blue">p1</a>
<p id="blue">1</p>
当用a标签锚点打开C:/mydata/2006a /pengpaitoubu.html#blue此页面时，id为blue的p元素变为蓝色。不用锚点打开，直接输入以上链接，也可以实现此效果。
E:not(s)示例：
p:not(#blue){background: blue;}
<p id="blue">1</p>
<p>2</p>
<p>3</p>
为id不是blue的p元素添加蓝色背景。
