三十个应该牢牢记住的CSS选择器（上）/The 30 CSS Selectors you Must Memorize

来自：http://net.tutsplus.com/tutorials/html-css-techniques/the-30-css-selectors-you-must-memorize/

1. *

view plaincopy to clipboardprint?

1. * {  
2.  margin: 0;  
3.  padding: 0;  
4. }     

*代表选中全部选择器，有些人用来清零margin和padding属性，不过一般在测试中使用，不在正规项目中使用，因为*会让整个页面的负载加重

view plaincopy to clipboardprint?

1. #container * {  
2.  border: 1px solid black;  
3. }     

这个例子可以选中container的所有子选择器

兼容性

• IE6+
• Firefox
• Chrome
• Safari
• Opera

---

2. #X

view plaincopy to clipboardprint?

1. #container {  
2.    width: 960px;  
3.    margin: auto;  
4. }     

使用井号表示选中名称为id的选择器，是简单常用的一种用法

自问：为了选中一个元素，我一定要使用id吗？

id选择器是严格的而且不允许复用，如果可以的话，先试着使用标签名、一个新的HTML5元素名或者是一个伪类。

兼容性

• IE6+
• Firefox
• Chrome
• Safari
• Opera

---

3. .X

view plaincopy to clipboardprint?

1. .error {  
2.   color: red;  
3. }     

这是类选择器，选中类名为x的元素对象。id和class的区别在与后者能够选中多个元素对象。对一组元素对象添加样式的时候，就可以使用class，或者，当要在众多元素中找到唯一的元素对象并对他添加样式的时候，就要使用id了。

兼容性

• IE6+
• Firefox
• Chrome
• Safari
• Opera

---

4. X Y

view plaincopy to clipboardprint?

1. li a {  
2.   text-decoration: none;  
3. }     

子选择器。他用来选择更底层的选择器，比如，在一个无序列表里面你只需选中里面的一个锚点，那么你就需要这样的选择器了。

兼容性

• IE6+
• Firefox
• Chrome
• Safari
• Opera

---

5. X

view plaincopy to clipboardprint?

1. a { color: red; }  
2. ul { margin-left: 0; }     

如果你想要选中所有的同种元素，那就使用它们的标签类型作为选择器吧。比起使用id和class，这样会简单得多。如果你需要选中所有的无序列表，就用 ul { }

兼容性

• IE6+
• Firefox
• Chrome
• Safari
• Opera

---

6. X:visited and X:link

view plaincopy to clipboardprint?

1. a:link { color: red; }  
2. a:visted { color: purple; }     

我们使用伪类:link来选中所有的可点击的锚点标签

如你所想，我们也可以使用伪类:visited来选中页面中已经被点击访问的锚点标签

兼容性

• IE7+
• Firefox
• Chrome
• Safari
• Opera

---

7. X + Y

view plaincopy to clipboardprint?

1. ul + p {  
2.    color: red;  
3. }     

这种选择器也叫相邻选择器，它选中的只是前面那个选择器里面最前的一个元素，比如上述表达，只有ul选择器里面的第一个p选择器里面的内容才能改变颜色，其他的不行。

兼容性

• IE7+
• Firefox
• Chrome
• Safari
• Opera

---

8. X > Y

view plaincopy to clipboardprint?

1. div#container > ul {  
2.   border: 1px solid black;  
3. }     

标准的X Y和X > Y的区别在与后者只选中直系的子元素，比如下面

view plaincopy to clipboardprint?

1. <div id="container">  
2.    <ul>  
3.       <li> List Item  
4.         <ul>  
5.            <li> Child </li>  
6.         </ul>  
7.       </li>  
8.       <li> List Item </li>  
9.       <li> List Item </li>  
10.       <li> List Item </li>  
11.    </ul>  
12. </div>  

#container > ul 选择器只会选中id为container的div里面的直接子元素ul，而不会选中像例子中的那个<li>标签里面的子元素<ul>

因此，使用子选择符具有性能优势，事实上，当使用基于CSS选择器引擎的Javascript时，特别推荐使用子选择符。

兼容性

• IE7+
• Firefox
• Chrome
• Safari
• Opera

---

9. X ~ Y

view plaincopy to clipboardprint?

1. ul ~ p {  
2.    color: red;  
3. }  

这个选择符跟X + Y相似，不过它相对没有那么严格，他会选中ul中所有的p元素

兼容性

• IE7+
• Firefox
• Chrome
• Safari
• Opera

---

10. X[title]

view plaincopy to clipboardprint?

1. a[title] {  
2.    color: green;  
3. }     

属性选择器，在上面的例子中，这个将会选择带有title属性的锚点标签a。

兼容性

• IE7+
• Firefox
• Chrome
• Safari
• Opera

---

11. X[href="foo"]

view plaincopy to clipboardprint?

1. a[href="http://net.tutsplus.com"] {  
2.   color: #1f6053; /* nettuts green */  
3. }  

这个选择器可以为所有连接指向http://net.tutsplus.com的锚点标签a添加样式。而其他的则不会受影响

记住在使用基于CSS选择器引擎的javascript中也使用这些选择器，如果可能，在非正式的方法中经常使用CSS3选择器。

这个选择器可以起到很好的作用，但是他却是很严格的，如果一个连接是指向Nettuts+的，但是他的路径确实nettuts.com或者一个完整的url连接，在这种情况下，我们可以使用一些正则表达语法。

兼容性

• IE7+
• Firefox
• Chrome
• Safari
• Opera

---

12. X[href*="nettuts"]

view plaincopy to clipboardprint?

1. a[href*="tuts"] {  
2.   color: #1f6053; /* nettuts green */  
3. }     

对所有包含“tuts”的路径添加样式

兼容性

• IE7+
• Firefox
• Chrome
• Safari
• Opera

---

13. X[href^="http"]

view plaincopy to clipboardprint?

1. a[href^="http"] {  
2.    background: url(path/to/external/icon.png) no-repeat;  
3.    padding-left: 10px;  
4. }     

为连接路径以“http”开头的元素对象添加样式

我们搜索“http”而不搜索“http://”是因为这样没必要，也因为这样说明不了那些以“https:”开头的连接

兼容性

• IE7+
• Firefox
• Chrome
• Safari
• Opera

---

14. X[href$=".jpg"]

view plaincopy to clipboardprint?

1. a[href$=".jpg"] {  
2.    color: red;  
3. }     

我们使用正则表达符 $,来关联一个字符串的末尾。我们使用这个选择器来选中以“.jpg”结尾的元素对象，那些.png,.gif则不受影响

兼容性

• IE7+
• Firefox
• Chrome
• Safari
• Opera

---

15. X[data-*="foo"]

view plaincopy to clipboardprint?

1. a[data-filetype="image"] {  
2.    color: red;  
3. }     

我们要怎样才能选中以jpg、jpeg、png和gif结尾的元素对象呢？

view plaincopy to clipboardprint?

1. a[href$=".jpg"],  
2. a[href$=".jpeg"],  
3. a[href$=".png"],  
4. a[href$=".gif"] {  
5.    color: red;  
6. }     

这样效率很低，解决办法是在每一个图片锚点后加上文件的数据类型：image，用选择器a[data-filetype="image"]即可

view plaincopy to clipboardprint?

1. <a href="path/to/image.jpg" data-filetype="image"> Image Link </a>  

view plaincopy to clipboardprint?

1. a[data-filetype="image"] {  
2.    color: red;  
3. }  

兼容性

• IE7+
• Firefox
• Chrome
• Safari
• Opera

---

16. X[foo~="bar"]

view plaincopy to clipboardprint?

1.  a[data-info~="external"] {  
2.    color: red;  
3. }  
4.   
5. a[data-info~="image"] {  
6.    border: 1px solid black;  
7. }     

所有带有external属性值data-info的，都可以添加指定的样式

view plaincopy to clipboardprint?

1. "<a href="path/to/image.jpg" data-info="external image"> Click Me, Fool </a>  

view plaincopy to clipboardprint?

1. /* Target data-info attr that contains the value "external" */  
2. a[data-info~="external"] {  
3.    color: red;  
4. }  
5.   
6. /* And which contain the value "image" */  
7. a[data-info~="image"] {  
8.   border: 1px solid black;  
9. }  

兼容性

• IE7+
• Firefox
• Chrome
• Safari
• Opera