CSS3你不可不知的特性：选择器
- September 19th, 2010
- Posted in 学以致用
- Tags: CSS3 : 设计
- Write comment
CSS3是CSS技术的升级版本，增加了很多新的特性，包括增加了更多的CSS选择器，可以实现更简单但是更强大的功能。 下面我们就一起来看一看吧：
属性选择器(Attribute Selectors)
在原来的基础上，CSS3增加了3种新的属性选择器：
- item[attribute^="value"] => 选择属性值以“value”开始的元素
- item[attribute$="value"] => 选择属性值以“value”结束的元素
- item[attribute*="value"] => 选择属性值包含“value”的元素
比如下面这段代码：
<p>
For more information visit our page <a href="/about">contacts</a>
or visit the <a href="http://website.international.example.com">international website</a>.
</p>
我们要给所有指向本站以外的URL右边加上一个小图标。那么我们就可以选择所有“href”属性值以“http://”开头的元素：
a[href^="http://"]{
padding-right:13px;
background:#FFF url(external.png) center right no-repeat;
}
效果就如下图：
同理，我们还可以给指向不同的文件类型的URL加上不同的图标：
a[href$="pdf"]{
padding-right:13px;
background:#FFF url(icon_pdf.png) center right no-repeat;
}
a[href$="doc"]{
padding-right:13px;
background:#FFF url(icon_doc.png) center right no-repeat;
}
a[href$="mp3"]{
padding-right:13px;
background:#FFF url(icon_pdf.png) center right no-repeat;
}
兄弟选择器（Sibling item selector， item1~item2）
它选择的是在item1之后的，并且与item1同级的item2
例如：
h2 ~ h3 {
margin-left:20px;
}
<body>
<h2>Example page</h2>
<ul>
<h3>A fantastic list</h3>
<li>An item</li>
<li>An item</li>
<li>An item</li>
</ul>
<h3>The rest of the page</h3>
…
</body>
上面的例子中，只有第二个<h3>元素被设置的margin-left，第一个<h3>因为与<h2>不同级（它在<ul>之下，而另外两个都是在<body>之下），所以不受影响。
伪类:NOT 和 :TARGET
伪类:NOT（item） 和 :TARGET也是CSS3的新属性之一。
例如：
*:not(p){
color:yellow;
}
意思是：“选择所有不是<p>标签内的元素，并把它们的颜色改为黄色”
target 的意思是:“如果一个元素被内部链接链接，并且当这个元素的链接被激活时，就应用设置的属性”
例如下面的代码：
<ul>
<li>
<a href="#first">First</a>
</li>
<li>
<a href="#second">Second</a>
</li>
<li>
<a href="#third">Third</a>
</li>
<li>
<a href="#fourth">Fourth</a>
</li>
<li>
<a href="#fifth">Fifth</a>
</li>
</ul>
<p id="first">
This is the first paragraph
</p>
<p id="second">
This is the second paragraph
</p>
<p id="third">
This is the third paragraph
</p>
<p id="fourth">
This is the fourth paragraph
</p>
<p id="fifth">
This is the fifth paragraph
</p>
应用以下的CSS风格：
p:target{background-color:#FF3399;}
当段落被链接到的时候，它的背景色将变为粉色。大家可以看这里（猛击里面的段落链接查看效果）
结构伪类
结构伪类是CSS3中增加的一个特性，它可以有效地减少页面内class属性和ID属性的定义,并且快速地选择目标元素。比如，想要给表格里的行添加不同的背景色，或者对你博客中的评论列表应用不同的属性，它们就可以派上用场。首先，我们来看看结构伪类都有哪些：
- E:nth-child(N) => 匹配所有在父元素中排第N个的E元素（所有元素都参与计算）
- E:nth-last-child(N) => 从最后一个开始算，匹配所有在其父元素中排第N的E元素
- E:nth-of-type(N) => 匹配所有在其父元素中的第N个E类元素（只有E类元素参与计算，忽略其他类型元素）
- E:nth-last-of-type(N) => 从最后一个开始算，匹配所有在其父元素中的第N个E类元素
参数n可以是：
- 数字, 比如:nth-child(3)选择的是第3个子元素；例如：li:nth-child(6) /*对第六个<li>运用样式 */
- “odd”或者“even”，odd表示奇数个元素，even表示偶数个元素；例如：li:nth-child(odd) /*对所有奇数的<li>元素运用样式 */
- 表达式“an+b”，a，b可以为正数和负数；
最后一条解释起来有点麻烦：
a => 表示每过a个元素，就开始运用样式；
b => 表示从第b个元素开始计算；
例子：
3n+1 会匹配第1，4，7，10……个元素；4n+6 会匹配第6,10,14……个元素；2n+1就等于关键字odd。
如果a=b，或者b=0，我们就可以不考虑b。例如表达式3n+3和3n+0跟3n的效果是一样的，都是每三个元素重复一次。
如果a=1，a也可以被忽略。例如1n+3跟n+3效果一样；如果a=0，就表示不重复运用样式，只对第b个元素运用。例如0n+5跟5效果一样
a和b都可以是负数，但是只有当N值算出来的正数时，才运用样式。如果b是负数，可以用正号代替负号。
表一：伪类表达式的结果
| n | 2n+1 | 4n+1 | 4n+4 | 4n | 5n-2 | -n+3 |
| 0 | 1 | 1 | 4 | - | - | 3 |
| 1 | 3 | 5 | 8 | 4 | 3 | 2 |
| 2 | 5 | 9 | 12 | 8 | 8 | 1 |
| 3 | 7 | 13 | 16 | 12 | 13 | - |
| 4 | 9 | 17 | 20 | 16 | 18 | - |
| 5 | 11 | 21 | 24 | 20 | 23 | - |
下面介绍一些特别的结构伪类：
- :root => 匹配文档的根元素 (在 HTML里, 它选择的就是 <html> 元素)
- :last-child => 匹配容器的最后一个子元素 (与:first-child相反)
- :first-of-type => 匹配容器里第一个所选类型的子元素
- :last-of-type => 匹配容器里最后一个所选类型的子元素
- : only-child => 如果一个指定元素是其父元素里唯一的一个子元素，那么就匹配该元素
- : only-of-type => 如果父元素里只有一个指定类型的子元素，那么就匹配它该子元素
- :empty => 匹配一个空元素。例如：
p:empty 会匹配“<p></p>”，但不匹配“<p> </p>” 和“<p>hello world!</p>”
与表单（forms）有关的伪类
- :disabled => 匹配所有属性为"diasble"的表单元素
- :enabled => 匹配所有属性不为"diasble"的表单元素
- :checked => 匹配所有用户选择了的checkboxes 或 radio buttons元素
No comments yet.