码迷,mamicode.com
首页 > Web开发 > 详细

CSS3之选择器

时间:2014-12-29 20:00:05      阅读:174      评论:0      收藏:0      [点我收藏+]

标签:

总结了下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之选择器

标签:

原文地址:http://www.cnblogs.com/linda586586/p/4192272.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!