[转]30个你必须记住的css选择器
2012-09-08 10:54 Sam tsai 阅读(394) 评论(0) 编辑 收藏 举报英文原文： http://net.tutsplus.com/tutorials/html-css-techniques/the-30-css-selectors-you-must-memorize/
当你了解了id，class和后代选择器，就万事大吉了？如果是这样，那你就错失了大量灵活的方法。虽然本文中提到的有许多是css3的特性，因此这些特性只能在较先进的浏览器中才能体现，但是它们值得你记住。
1.*
*{
margin:0;
padding:0;
}
在进一步了解先进的选择器前，我们先介绍一些常见的选择器好了。
星号符会指向网页中的每一个元素。许多开发者会使用这个技巧来初始化margin和padding。虽然对于快速测试而言没问题，但是我建议你在实际的成品中永远不要这样使用。这对浏览器来说负担太重了，而且完全没必要。
*号也可以用于子选择器
#container *{
border:1px solid black;
}
这段代码会作用于#container div的每一个子元素。再次强调，如果你有这种使用习惯，以后尽可能少这样使用。
兼容性
IE6+
- Firefox
- Chrome
- Safari
- Opera
2.#X
#container{
width:960px;
margin:auto;
}
在标记前使用#前缀，可以让我们使用id来选择。这是一种非常常见的用法，但是使用时请小心。
“问问自己：我真的需要使用一个id来选择这个元素吗？”
id选择器非常严格，并不允许复用。尽可能地使用标签名、html元素、甚至一个伪类。
兼容性
IE6+
Firefox
Chrome
Safari
Opera
3..X
.error{
color:red;
}
这是一个class选择器，id和class的不同点在于，使用后者，你可以选择多个元素。当你需要定义一堆元素的样式时，使用class。使用id来完成大海捞针的工作，或者为一个特定的元素定义样式。
兼容性
IE6+
FF
Chrome
Safari
Opera
4. X Y
li a{
text-decoation:none;
}
下一个使用最多的选择器是后代选择器。当你需要定义更多特性的时候，你会使用这种选择器。例如，假设你只需要定义一个无序列表的样式而不是所有集合标签时怎么办呢？这个时候就该使用后代选择器。
建议：如果你的选择器写得像 X Y Z A B.error这样，那你就错了。常常问问自己，是否真的需要套用那么多层。
兼容性
IE6+
FF
chrome
safari
Opera
5.X
a{color:red;}
ul{margin-left:0;}
当你需要定义页面所有的元素时，通过他们的类型，而不是通过id或者class。尽可能的简单，使用类型选择器。如果需要定义所有的无序列表，使用ul{}
兼容性
IE6+
FF
chrome
safari
Opera
6.X:visited and X:link
a:link{color:red;}
a:visited{color:purple;}
我们使用:link伪类来选择所有可以被点击的标签。
另外，我们使用:visited伪类来选择已经被点击过的或访问过的标签。
兼容性
IE7+
FF
chrome
safari
Opera
7.X+Y
ul+p{
color:red;
}
这种方式被称为毗邻选择器。它会选择以X为上级的第一个Y。在这个例子中，所有ul标签内的第一个p的内容会被定义成红色。
兼容性
IE7+
FF
chrome
safari
Opera
8.X>Y
div#container > ul{
border:1px solid black;
}
标准X Y与X > Y 的区别在于，后者只会选择直接的子孩子，请看下面的代码。
<div id="container">
<ul>
<li>List Item
<ul>
<li>Child</li>
</ul>
</li>
<li>List Item</li>
<li>List Item</li>
<li>list Item</li>
</ul>
</div>
#container>ul选择器只会选择id为container的直接子孩子。在这个例子中，它不会选择第一个li的子孩子ul
因为某些原因，使用这种孩子连接符会有性能优势。事实上，javascript和css选择器引擎都非常推荐这种写法。
兼容性
IE7+
FF
chrome
safari
Opera
9. X~Y
ul~p{
color:red;
}
这种兄弟连接符与X+Y类似，但是没有X+Y那么严格，毗邻选择器（ul+p)只会选择ul下的第一个p元素，这一个选择器则更广泛。它会选择所有ul下的p元素，只要p在ul里。
兼容性
IE7+
FF
chrome
safari
Opera
10.X[title]
a[title]{
color:green;
}
这种选择器被成为属性选择器，在上例中，它会选择有title属性的锚点标签。没有title属性的锚点标签不会接收这个样式的定义。如果你需要更多的特性怎么办？嘿嘿……你懂的
兼容性
IE7+
FF
chrome
safari
Opera
11.X[href="foo"]
a[href="http://net.tutsplus.com"] {
color: #1f6053; /* nettuts green */
}
以上这个代码片段会改变所有链接是 http://net.tutsplus.com的锚点标签的样式。它们的颜色会变为绿色。而其他锚点则不会改变。
既然我们把值包含在引号中了，别忘了我们也可以再javascript css选择器引擎中这样使用。可能的话，多使用css3选择器的非官方方法。
虽然有点小严格，但是这种方法很有效。如果链接不是直接到Nettuts+的完整url，而可能只是nettuts.com路径怎么办？在这种情况下，我们可以使用正则表达式的啦。
兼容性
IE7+
FF
chrome
safari
Opera
12. X[href*="nettuts"]
a[href*='tuts']{
color:#1f6053;
}
来了不是~这就是我们需要的代码。*号指定了包含该属性的值必须包含定义的值。就是说，这句代码包含了href值为 nettuts.com，net.tutsplus.com或者tutsplus.com。
记住这个描述过于宽泛，如果是某个锚点标签链接到某个连接中带有tuts非Envato的网站（tutsplus属于Envato旗下网站）呢？因此你需要更多特性来限制，分别使用^和&来限定字符串的开始和结束。
兼容性
IE7+
FF
chrome
safari
Opera
13. X[href^="http"]
a[href^="http"] {
background: url(path/to/external/icon.png) no-repeat;
padding-left: 10px;
}
有没有想过某些网站是如何定义一个图标的链接的？我确定你肯定看到过。这些链接很容易让你跳转到另一个网站。
使用^(carat)符灰常简单啦。这个符号常常在正则表达式中表示字符串的开始。如果我们想指向所有以"http"开头的"href"属性的锚点的话，我们就可以使用类似于上面的那段代码啦。
注意啦，我们不需要搜索"http://",完全没必要，因为我们还要包含以https://开头的链接呢。
如果我们想为所有链接到图片的链接定义样式咋办？这种情况下，我们得搜索字符串的结束了不是。
兼容性
IE7+
FF
chrome
safari
Opera
14. X[Href$=".jpg"]
a[href$=".jpg"] {
color: red;
}
又来了，我们还是使用正则表达式符号，$(dolor)，来作为字符串的结束标记。这种情况下，我们就会搜索所有url以.jpg为结尾的锚点啦。记住记住这种情况下gif和png格式的图片不会被选择哦。
兼容性
IE7+
FF
chrome
safari
Opera
15. X[data-*="foo"]
a[data-filetype="image"] {
color: red;
}
回顾最近一条，我们如何能包含各种图片类型:png,jpeg,jpg,gif?很容易想到，我们能通过多个选择器来不是，像这样：
a[href$=".jpg"],
a[href$=".jpeg"],
a[href$=".png"],
a[href$=".gif"] {
color: red;
}
不过，这样很蛋疼，效率极低。另一个解决办法是使用自定义属性。如果我们加了一种自己的 data-filetype 属性给每一个链接到图片的锚点的话呢？
<a href="path/to/image.jpg" data-filetype="image"> Image Link </a>
这样关联后，我们就能使用标准的属性选择器来指定这些链接啦。看下面：
a[data-filetype="image"] {
color: red;
}
兼容性
IE7+（MB IE6..）
FF
chrome
safari
Opera
16. X[foo~="bar"]
a[data-info~="external"] {
color: red;
}
a[data-info~="image"] {
border: 1px solid black;
}
这儿有个鲜为人知的特殊技巧，绝对让你印象时刻。~(tilda)符，它可以帮助我们指向那些以空格隔开多个值的属性的元素（真拗口，这翻译我自己都看不懂，水平问题）
以我们第15条的自定义属性为例，上面的代码中我们创建了 data-info属性，这个属性可以定义以空格分隔的多个值。这样，这个链接本身就是个icon，并且指向的也是一个图片链接，像下面这样。
<a href="path/to/image.jpg" data-info="external image"> lick Me, Fool </a>
有了这样适当的标记，通过使用 ~ 属性选择器的技巧，我们就可以指向任何具有着两种属性的任何一种啦。
/* Target data-info attr that contains the value "external" */
a[data-info~="external"] {
color: red;
}
/* And which contain the value "image" */
a[data-info~="image"] {
border: 1px solid black;
}
兼容性
IE7+
FF
chrome
safari
Opera
17.X:checked
input[type=radio]:check{
border:1px solid black;
}
这种伪类只会指向已经被选中的UI元素，如单选、多选。就是这么简单。
兼容性
IE9+
FF
chrome
safari
Opera
18. X:after
before 和 after 伪类也很蛋疼。貌似人们每天都能找到或者发明一些新办法来有效地使用它们。它们很容易控制选择器周围的内容。
很多第一次使用是因为他们需要对clear-fix进行改进。
.clearfix:after {
content: "";
display: block;
clear: both;
visibility: hidden;
font-size: 0;
height: 0;
}
.clearfix {
*display: inline-block;
_height: 1%;
}
这个改进使用了:after伪类元素来在元素后增加一个空间，然后清除它。这个牛X的技巧你应该收藏到工具包里，特别是当overflow:hidden方法无能为力的时候。
想看看其他创造性的用法：访问我滴创建阴影的窍门
通过Css3选择器的标准说明书，你应该有技巧地使用这些伪类语法——双冒号::。不过为了兼容，浏览器会接受一个双引号。
兼容性
IE8+
Firefox
Chrome
Safari
Opera
19. X:hover
div:hover{
background:#e3e3e3;
}
我去，这个你必须懂。典型的官方形式的用户触发伪类。听起来会有点迷惑，不过实际上并非如此。想在用户在某个元素上面悬停时定义个特别的样式？这个属性就是做这个的。
记住啦，较old版本的IE，只能在锚点标签后使用这个hover。
这个选择器你用得最多的情况，估计可能就是在锚点的悬停时加个border-bottom啦。
a:hover{
border-bottom:1px solid black;
}
小贴士： border-bottom:1px solid black;比 text-decoration:underline;好看一点哦。（真的？我去）
兼容性
IE6+（ie6:hover必须在锚点标签里使用）
FF
Chrome
Safari
Opera
20. X:not(selector)
div:not(#container){
color:blue;
}
not伪类灰常有用。例如我要选择所有的div，除了有id为container的。上面那个代码片段就能完美的实现。
如果我想选择除了p以外的所有元素，我可以这么做：
*:not(p){
color:green;
}
兼容性
IE9+
FF
Chrome
Safari
Opera
21. X::pseudoElement
p::first-line{
font-weight:bold;
font-size:1.2em;
}
我们可以使用伪元素（以::为表示）来定义元素的样式。例如第一行，第一个字符，记住啦，这种方法只能应用于同级元素才有效。
伪元素由两个冒号组成
指定p的第一个字符的样式
p::first-letter{
float:left;
font-size:2em;
font-family:cursive;
padding-right:2px;
}
这段代码会找到所有段落，然后再从中定义这些段落的第一个字符。
这常常使用在仿报纸的文章首字母样式。
指定p的首行样式
p::first-line{
font-weight:bold;
font-size:1.2em;
}
同样，这个::first-line伪元素会像我们期望的那样，只定义段落的第一行的样式。
兼容性
IE6+
FF
Chrome
Safari
Opera
22. X:nth-child(n)
li:nth-child(3){
color:red;
}
想想那些没法从元素堆中选择元素的日子。nth-child伪类解决了这个问题。
请注意 nth-child接收整数和变量，不过不是从0开始的，如果你想选定第二个li，使用 li:nth-child(2).
我们甚至使用这个办法来选择任意的子元素。例如，我们可以用 li:nth-child(4n)来完成4为倍数的所有元素的选择。
兼容性
IE9+
FF
Chrome
Safari
23. X:nth-last-child(n)
li:nth-last-child(2){
color:red;
}
如果我有灰常多的li在ul里面，我只想要最后3个li怎么办？不必使用li:nth-child(397),你可以使用nth-last-child伪类。
这种技巧和第六条几乎一样有效，不过两者的不同之处在于它从结束开始收集，用回溯的方式进行。
兼容性
IE9+
Firefox 3.5+
Chrome
Safari
Opera
24. X:nth-of-type(n)
ul:nth-of-type(3){
border:1px solid black;
}
你应该有很多时候想要元素类型来选择元素而不是通过孩子。
想象一下标记5个无序列表（UL）。如果你想定义第三个ul，并且没有一个唯一的id来找到它，你就可以使用 nth-of-type(3)伪类了。在上面这个代码段中，只有第三个ul才会有黑色的边框。
兼容性
IE9+
Firefox 3.5+
Chrome
safari
25. X:nth-last-of-type(n)
ul:nth-last-of-type(3) {
border: 1px solid black;
}
没错，我们一样可以使用nth-last-of-type来从结束开始回溯这个选择器，来找到我们想要的元素。
兼容性
IE9+
Firefox 3.5+
Chrome
Safari
Opera
26. X:first-child
ul li:first-child{
border-top:none;
}
这个结构的伪类让我们可以选择某个元素的第一个子孩子。你通常可以使用这个办法来删除第一个或者最后一个元素的边框。
例如，你有一系列的rows，每一个都有border-top 和border-bottom。这种情况下，第一行和最后一行看起来会灰常怪。
很多设计师会使用first和last类来弥补这个缺陷。相反，你可以使用这些伪类来解决这些问题。
兼容性
IE7+
Firefox
Chrome
Safari
Opera
27. X:last-child
ul>li:last-child{
color:green;
}
与first-child相反，last-child会选择父节点的最后一个子节点。
例子：
我们建立一些例子来示范这些类的可能的用法。我们会建立一种风格来展示。
标记
<ul>
<li> List Item </li>
<li> List Item </li>
<li> List Item </li>
</ul>
没啥特别的，就是一个简单的序列。
Css
ul{
width:200px;
background:#292929;
color:white;
list-style:none;
padding-left:0;
}
li{
padding:10px;
border-bottom:1px solid black;
border-top:1px solid #3c3c3c
} 
这个样式会设置一个背景，删除浏览器默认的ul的padding值，并定义边框给每一个li来提供一点深度。
如上图所示，唯一的问题是最上面的边框和最下面的边框看起来有点儿怪。让我们来使用:first-child和:last-child来解决这个问题。
li:first-child{
border-top:none;
}
li:last-child{
border-bottom:none;
} 
看上图，解决了不是。
兼容性
IE9+
Firefox
Chrome
Safari
Opera
是滴，IE8支持 first-child 不过不支持last-child。
28. X:only-child
div p:only-child{
color:red;
}
实话说，你很可能会发现你不会经常使用 only-child伪类。尽管如此，它确实有用，你应该需要它。
它可以帮助你选择是父节点的独生子（没别的孩子啦）的元素。例如，使用上面的代码，只有是div的唯一子孩子的p段落才会定义其颜色为red。
让我们来假定下面的标记。
<div><p>My paragraph here.</p></div>
<div>
<p>My paragraph here1.</p>
<p>My paragraph here2.</p>
</div>
这样，第二个div的p标签的内容不会被选中。只有第一个div的p才会被选中。
兼容性
IE9+
Firefox
Chrome
Safari
Opera
29. X:only-of-type
li:only-of-type {
font-weight: bold;
}
这种结构的伪类有几种灰常聪明的用法。它可以选定在其父节点内没有兄弟节点的元素。例如，我们可以选择只有一个li作为其子孩子的ul。
首先，取决于你想怎样完成这一目标。你可以使用 ul li，不过，这回选择所有li元素。唯一的办法是使用only-of-type。
ul>li:only-of-type{
font-weight:bold;
}
兼容性
IE9+
Firefox
Chrome
Safari
Opera
30. X:first-of-type
first-of-type 伪类可以让你选择该类型的第一个兄弟节点。
一个测试
为了更好地理解它，让我们来测试一下啊。拷贝下面的标记到你的编辑器。
<div>
<p> My paragraph here. </p>
<ul>
<li> List Item 1 </li>
<li> List Item 2 </li>
</ul>
<ul>
<li> List Item 3 </li>
<li> List Item 4 </li>
</ul>
</div>
现在，别急着往下读，试试看如何能只选择'LIST ITEM 2'?如果你搞定了（或者放弃了），继续读。
解决办法1
有很多办法能搞定这个测试。我们回顾其中一小部分。以使用first-of-type开始。
ul:first-of-type > li:nth-child(2) {
font-weight: bold;
}
这个代码段本质上表示，“找到第一个无序列表，然后找到这里面的li，然后，继续使用过滤器直到找到第二个li。
解决办法2
另一个可行的办法是毗邻选择器。
p + ul li:last-child {
font-weight: bold;
}
在这个方案中，我们找到p的临近节点ul，然后找到ul的li的最后一个孩子。
解决办法3
我们可以随心所欲滴选择这些选择器。
ul:first-of-type li:nth-last-child(1){
font-weight:bold;
}
这次，我们取到第一个ul，然后找到第一个元素，不过是从最后一个开始数。哈哈。
兼容性
IE9+
Firefox
Chrome
Safari
Opera
结论
如果你仍在为解决old浏览器的缺陷而纠结，如IE6。在使用这些新的选择器方面，你仍然需要非常小心。不过，别因为这个阻碍了你对这些新玩意儿的学习。别虐待自己。确保关注这里的兼容性列表。应一方面，你可以使用 Dean Edward's excellent IE9.js script 来为旧浏览器提供新的选择器支持。（我去。cool）
其次，当使用javascript库时，如流行的jQuery，最好尽可能使用这些css3本身的选择器而不是使用库的自定义方法/选择器。这能让你的代码更快哦，因为这些选择器引擎本身就能被浏览器解析，而不是用这些库选择器。
感谢阅读，希望你能学到一两个技巧。
