首页 > 代码库 > CSS3之选择器
CSS3之选择器
总结了下CSS3新增的一些选择器。
CSS3的选择器有基本选择器、属性选择器、伪类选择器几类。
| 选择器 | 举例 | 例子描述 |
| element1~element2 | p~a | 选择前面有 <p> 元素的每个 <a> 元素。 |
| [attrtube^=value] | a[src^="http"] | 选择其 src 属性值以 "https" 开头的每个 <a> 元素。 |
| [attrtube$=value] | a[src$=".pdf"] | 选择其 src 属性值以 ".pdf" 结尾的每个 <a> 元素。 |
| [attrtube*=value] | a[src*="abc"] | 选择其 src 属性值包含 "abc" 的每个 <a> 元素。 |
| :first-of-type | p:first-of-type | 选择属于其父元素的首个 <p> 元素的每个 <p> 元素。 |
| :last-of-type | p:last-of-type | 选择属于其父元素的最后 <p> 元素的每个 <p> 元素。 |
| :only-of-type | p:only-of-type | 选择属于其父元素的唯一 <p> 元素的每个 <p> 元素。 |
| :only-child | p:only-child | 选择属于其父元素的唯一子元素的每个 <p> 元素。 |
| :nth-child(n) | p:nth-child(2) | 选择属于其父元素的第二个子元素的每个 <p> 元素。 |
| :nth-last-child(n) | p:nth-last-child(2) | 同上，从最后一个元素开始计算 |
| :nth-of-type(n) | p:nth-of-type(2) | 选择属于其父元素第二个 <p> 元素的每个 <p> 元素。 |
| :nth-last-of-type(n) | p:nth-last-of-type(2) | 同上，从最后一个元素开始计算 |
| :last-child | p:last-child | 选择其父元素的最后元素的每个 <p> 元素。 |
| :root | :root | 选择文档的根元素 |
| :empty | p:empty | 选择没有子元素的每个p元素（包括文本节点） |
| :target | #news:target | 选择活动的#news元素 |
| :not(selector) | :not(p) | 选择非p的每个元素 |
| ::selection | ::selection | 选择被用户选取的元素部分 |
| :enabled | input:enabled | 选择可用的input元素 |
| :disabled | input:disabled | 选择禁用的input元素 |
| :checked | input:checked | 选择选中的input元素 |
其实对于这些选择器是再熟悉不过了。列举了其中一些选择器的例子：
nth-child(n)
<!DOCTYPE html><html><head><style> p:nth-child(odd){background:#ff0000;}p:nth-child(even){background:#0000ff;}</style></head><body><h1>这是标题</h1><p>第一个段落。</p><p>第二个段落。</p><p>第三个段落。</p><p>第四个段落。</p></body></html>
其中odd 和even 是可用于匹配下标是奇数或偶数的子元素的关键词（第一个子元素的下标是 1）。
另外一个例子：
<!DOCTYPE html><html><head><style> p:nth-child(2n+1){background:#ff0000;}</style></head><body><h1>这是标题</h1><p>第一个段落。</p><p>第二个段落。</p><p>第三个段落。</p><p>第四个段落。</p><p>第五个段落。</p><p>第六个段落。</p><p>第七个段落。</p><p>第八个段落。</p><p>第九个段落。</p></body></html>
注意这里的字母n只能是n,不能使用其他字符，否则会不能匹配。
CSS3之选择器
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。