30个最常用CSS选择器解析

443 查看

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

1. *

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

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

2. #X

#号作用域有相应id的元素。id是我们最常用的css选择器之一。id选择器的优势是精准,高优先级(优先级基数为100,远高于class的10), 作为javascript脚本钩子的不二选择,同样缺点也很明显优先级过高,重用性差,所以在使用id选择器前,我们最好问下自己,真的到了非用id选择 器的地步? 兼容浏览器:IE6+、Firefox、Chrome、Safari、Opera

3. .X

这是一个class(类)选择器。class选择器与id选择器的不同是class选择器能作用于期望样式化的一组元素。 兼容浏览器:IE6+、Firefox、Chrome、Safari、Opera

4. X Y

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

5. X

标签选择器。使用标签选择器作用于作用域范围内的所有对应标签。优先级仅仅比*高。 兼容浏览器:IE6+、Firefox、Chrome、Safari、Opera

6. X:visited和X:link

使用:link伪类作用于未点击过的链接标签。:hover伪类作用于点击过的链接。 兼容浏览器:IE7+、Firefox、Chrome、Safari、Opera

7. X+Y

相邻选择器,上述代码中就会匹配在ul后面的第一个p,将段落内的文字颜色设置为红色。(只匹配第一个元素) 兼容浏览器:IE7+、Firefox、Chrome、Safari、Opera

8. X>Y

9. X ~ Y

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

10. X[title]

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

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

11. X[title=foo]

属性选择器。 上面的代码匹配所有拥有href属性,且href为 http://css9.net 的所有链接。

这个功能很好,但是多少又有些局限。如果我们希望匹配href包含css9.net的所有链接该怎么做呢?看下一个选择器。 兼容浏览器:IE7+、Firefox、Chrome、Safari、Opera

12. X[title*=css9.net]

属性选择器。正如我们想要的,上面代码匹配的是href中包含”css9.net”的所有链接。

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

13. X[href^=http]

属性选择器。上面代码匹配的是href中所有以http开头的链接。 兼容浏览器:IE7+、Firefox、Chrome、Safari、Opera

13. X[href$=.jpg]