CSS3 —— 选择器篇
CSS3选择器
想想我们之前用过的css选择器，有标签选择器，有类（.class）选择器，有ID（#id）选择器，有后代选择器，有群组选择器，还有基于以上延伸出来的选择器，例如 div .class等这类混合行选择器。
CSS3添加了很多特性，圆角、边框、背景、选择器等、每一个都拯救web开发人员于水火之中，接下来，本文主要介绍css3新添加的选择器。
直奔主题：
通用选择器：
|
E~F |
p~ul |
匹配前面有 <p> 元素的每个 <ul> 元素。 |
属性选择器：
|
E[att^=”val”] |
a[src^="https"] |
匹配其 src 属性值以 "https" 开头的每个 <a> 元素。 |
|
E[att$=”val”] |
a[src$=".pdf"] |
匹配其 src 属性值以 ".pdf" 结尾的所有 <a> 元素。 |
|
E[att*=”val”] |
a[src*="abc"] |
匹配其 src 属性值中包含 "abc" 子串的每个 <a> 元素。 |
伪类选择器：
|
与用户有关的伪类选择器 |
||
|
E:enabled |
input:enabled |
匹配每个启用的 <input> 元素。 |
|
E:disabled |
input:disabled |
匹配每个禁用的 <input> 元素 |
|
E:checked |
input:checked |
匹配每个被选中的 <input> 元素。 |
|
:selection |
::selection |
匹配被用户选取的元素部分。 |
|
结构性伪类 |
||
|
E:root |
:root |
匹配文档的根元素。 |
|
E:last-child |
p:last-child |
匹配父元素的最后一个子元素 等同于:nth-last-child(1) |
|
E:nth-child(n) |
p:nth-child(2) |
匹配其父元素的第n个子元素，第一个编号为1 |
|
E:nth-last-child(n) |
p:nth-last-child(2) |
同上，从最后一个子元素开始计数。 |
|
E:nth-of-type(n) |
p:nth-of-type(2) |
与:nth-child()作用类似，但是仅匹配使用同种标签的元素 |
|
E:nth-last-of-type(n) |
p:nth-last-of-type(2) |
与:nth-last-child() 作用类似，但是仅匹配使用同种标签的元素 |
|
E:first-of-type |
p:first-of-type |
匹配父元素下使用同种标签的第一个子元素 等同于:nth-of-type(1) |
|
E:last-of-type |
p:last-of-type |
匹配父元素下使用同种标签的最后一个子元素 等同于:nth-last-of-type(1) |
|
E:only-child |
p:only-child |
匹配父元素下仅有的一个子元素 等同于 :first-child:last-child或 :nth-child(1):nth-last-child(1) |
|
E:only-of-type |
p:only-of-type |
匹配父元素下使用同种标签的唯一一个子元素 等同于 :first-of-type:last-of-type或 :nth-of-type(1):nth-last-of-type(1) |
|
E:empty |
p:empty |
匹配一个不包含任何子元素的元素，注意，文本节点也被看作子元素 |
|
反选伪类选择器 |
||
|
E:not(s) |
:not(p) |
匹配不符合当前选择器的任何元素 |
|
突显当前活动的伪类选择器 |
||
|
E:target |
:target |
URL 带有后面跟有锚名称 #，指向文档内某个具体的元素。这个被链接的元素就是目标元素(target element)。 :target 选择器可用于选取当前活动的目标元素。
|
这个比较难理解，上代码：
<html> <head> <style> :target{ border: 2px solid #D4D4D4; background-color: #e5eecc; } </style> </head> <body> <p><a href="#news1">跳转至内容 1</a></p> <p><a href="#news2">跳转至内容 2</a></p> <p id="news1"><b>内容 1...</b></p> <p id="news2"><b>内容 2...</b></p> </body> </html>
以上为CSS3选择器篇。
