前端开发中常用的CSS选择器解析(一）

你也许已经掌握了id、class、后台选择器这些基本的css选择器。但这远远不是css的全部。下面向大家系统的介绍css中最常用的选择器，包括我们最头痛的浏览器兼容性问题。掌握了它们，才能真正领略css的巨大灵活性。

1.*

* {
    margin: 0;
    padding: 0;
}

星状选择符会在页面上的每一个元素上起作用。web设计者经常用它将页面中所有元素的margin和padding设置为0。 *选择符也可以在子选择器中使用。

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

上面的代码中会应用于id为container元素的所有子元素中。 除非必要，我不建议在页面中过的的使用星状选择符，因为他的作用域太大，相当耗浏览器资源。

兼容浏览器：IE6+、Firefox、Chrome、Safari、Opera

2. #X

#container {
    width: 960px;
    margin: auto;
}

#号作用域有相应id的元素。id是我们最常用的css选择器之一。id选择器的优势是精准，高优先级（优先级基数为100，远高于class的10），作为javascript脚本钩子的不二选择，同样缺点也很明显优先级过高，重用性差，所以在使用id选择器前，我们最好问下自己，真的到了非用id选择器的地步？

兼容浏览器：IE6+、Firefox、Chrome、Safari、Opera

3. .X

.error {
    color: red;
}

这是一个class(类)选择器。class选择器与id选择器的不同是class选择器能作用于期望样式化的一组元素。

兼容浏览器：IE6+、Firefox、Chrome、Safari、Opera

4. X Y

li a {
    text-decoration: none;
}

这也是我们最常用的一种选择器——后代选择器。用于选取X元素下子元素Y，要留意的点是，这种方式的选择器将选取其下所有匹配的子元素，无视层级，所以有的情况是不宜使用的，比如上述的代码去掉li下的所有a的下划线，但li里面还有个ul，我不希望ul下的li的a去掉下划线。使用此后代选择器的时候要考虑是否希望某样式对所有子孙元素都起作用。这种后代选择器还有个作用，就是创建类似命名空间的作用。比如上述代码样式的作用域明显为li。

兼容浏览器：IE6+、Firefox、Chrome、Safari、Opera

5. X

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

标签选择器。使用标签选择器作用于作用域范围内的所有对应标签。优先级仅仅比*高。

兼容浏览器：IE6+、Firefox、Chrome、Safari、Opera

6. X:VISITED和X:LINK

a:link {
    color: red;
}
a:visited {
    color: purple;
}

使用:link伪类作用于未点击过的链接标签。:hover伪类作用于点击过的链接。

兼容浏览器：IE7+、Firefox、Chrome、Safari、Opera

7. X+Y

ul + p {
    color: red;
}

相邻选择器，上述代码中就会匹配在ul后面的第一个p，将段落内的文字颜色设置为红色。(只匹配第一个元素)

兼容浏览器：IE7+、Firefox、Chrome、Safari、Opera

8. X>Y

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

<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>
 

子选择器。与后代选择器X Y不同的是，子选择器只对X下的直接子级Y起作用。在上面的css和html例子中，div#container>ul仅对container中最近一级的ul起作用。从理论上来讲X > Y是值得提倡选择器，可惜IE6不支持。

兼容浏览器：IE7+、Firefox、Chrome、Safari、Opera

9. X ~ Y

ul ~ p {
    color: red;
}

相邻选择器，与前面提到的X+Y不同的是，X~Y匹配与X相同级别的所有Y元素，而X+Y只匹配第一个。 兼容浏览器：IE7+、Firefox、Chrome、Safari、Opera

10. X[TITLE]

a[title] {
    color: green;
}

属性选择器。比如上述代码匹配的是带有title属性的链接元素。

兼容浏览器：IE7+、Firefox、Chrome、Safari、Opera

11. X[TITLE="FOO"]

a[href="http://58img.com"] {
    color: #1f6053;
}

属性选择器。 上面的代码匹配所有拥有href属性，且href为http://58img.com的所有链接。

这个功能很好，但是多少又有些局限。如果我们希望匹配href包含58img.com的所有链接该怎么做呢？看下一个选择器。

兼容浏览器：IE7+、Firefox、Chrome、Safari、Opera

13. X[HREF^="HTTP"]

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

属性选择器。上面代码匹配的是href中所有以http开头的链接。

兼容浏览器：IE7+、Firefox、Chrome、Safari、Opera

X[HREF$=".JPG"]

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

属性选择器。在属性选择器中使用$，用于匹配结尾为特定字符串的元素。在上面代码中匹配的是所有链接到扩展名为.jpg图片的链接。（注意，这里仅仅是.jpg图片，如果要作用于所有图片链接该怎么做呢，看下一个选择器。）

兼容浏览器：IE7+、Firefox、Chrome、Safari、Opera

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

在上一个选择器中提到如何匹配所有图片链接。如果使用X[href$=".jpg"]实现，需要这样做：

a[href$=".jpg"],
a[href$=".jpeg"],
a[href$=".png"],
a[href$=".gif"] {
    color: red;
}

看上去比较麻烦。另一个解决办法是为所有的图片链接加一个特定的属性，例如‘data-file’

html代码

<a href="path/to/image.jpg" data-filetype="image"> 图片链接 </a> 

 css代码如下：

a[data-filetype="image"] {
    color: red;
}

这样所有链接到图片的链接字体颜色为红色。

兼容浏览器：IE7+、Firefox、Chrome、Safari、Opera

15. X[foo~="bar"]

属性选择器。属性选择器中的波浪线符号可以让我们匹配属性值中用空格分隔的多个值中的一个。看下面例子：

html代码

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

 css代码

a[data-info~="external"] {
    color: red;
}

a[data-info~="image"] {
    border: 1px solid black;
}

在上面例子中，匹配data-info属性中包含“external”链接的字体颜色为红色。匹配data-info属性中包含“image”的链接设置黑色边框。

兼容浏览器：IE7+、Firefox、Chrome、Safari、Opera

17. X:checked

checked伪类用来匹配处于选定状态的界面元素，如radio、checkbox。

input[type=radio]:checked {
    border: 1px solid black;
}

上面代码中匹配的是所有处于选定状态的单选radio，设置1px的黑色边框。

兼容浏览器：IE9+、Firefox、Chrome、Safari、Opera