选择器30个最常用css选择器解析

30个最常用css选择器解析

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

* { margin: 0; padding: 0; }星状选择符会在页面上的每一个元素上起作用。web设计者经常用它将页面中所有元素的margin和padding设置为0。

*选择符也可以在子选择器中使用。

#container* { border: 1px solid black; }上面的代码中会应用于id为container元素的所有子元素中。

除非必要我不建议在页面中过的的使用星状选择符 因为他的作用域太大相当耗浏览器资源。兼容浏览器 IE6+、

1

Firefox、 Chrome、 Safari、 Opera 2.#X

#container { width: 960px; margin:a ut o; }井号作用域有相应id的元素。 id是我们最常用的c s s选择器之一。 id选择器的优势是精准高优先级优先级基数为100远高于class的10作为javascript脚本钩子的不二选择同样缺点也很明显优先级过高重用性差所以在使用id选择器前我们最好问下自己真的到了非用id选择器的地步

兼容浏览器 IE6+、Firefox、Chrome、Safari、Opera 3. .X

.error{ color: red; }这是一个class(类)选择器。c la s s选择器与i d选择器的不同是c la s s选择器能作用于期望样式化的一组元素。

兼容浏览器 IE6+、Firefox、Chrome、 Safari、Opera 4.X

Yli a { text-decoration: none; }这也是我们最常用的一种选择器——后代选择器。用于选取X元素下子元素

Y要留意的点是这种方式的选择器将选取其下所有匹配的子元素无视层级所以有的情况是不宜使用的 比如上述的代码去掉li下的所有a的下划线但li里面还有个ul我不希望ul下的li的a去掉下划线。使用此

后代选择器的时候要考虑是否希望某样式对所有子孙元素都起作用。这种后代选择器还有个作用就是创建类似命名

2

空间的作用。比如上述代码样式的作用域明显为li。 兼容浏览器 IE6+、 Firefox、 Chrome、 Safari、 Ope ra

5.Xa{colo r: red; } ul {ma rgin-left:0; }标签选择器。使用标签选择器作用于作用域范围内的所有对应标签。优先级仅仅比*高。 兼容浏览器 IE6+、 Firefox、 Chrome、 Safari、Opera 6.X:visited和X:linka:link { colo r: re d; } a:viste d { colo r: purple; }使用:link伪类作用于未点击过的链接标签。 :hover伪类作用于点击过的链接。兼容浏览器IE7+、Firefox、Chrome、Safari、Opera 7.X+Yul+p{ color: red; }相邻选择器上述代码中就会匹配在ul后面的第一个p将段落内的文字颜色设置为红色。 (只匹配第一个元素)

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

8.X>Ydiv#container>ul { border: 1px solid black; }List Item ChildList Item List Item List Item子选择器。与后代选择器XY不同的是子选择器只对X下的直接子级Y起作用。在上面的css和html例子中

3

div#container>ul仅对container中最近一级的ul起作用。从理论上来讲X>Y是值得提倡选择器可惜IE6不支持。

兼容浏览器 IE7+、Firefox、Chrome、 Safari、Opera 9.X~Yul~p{ colo r: red; }相邻选择器与前面提到的X+Y不同的是 X~Y匹配与X相同级别的所有Y元素而X+Y只匹配第一个。

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

10.X[t it le]a[title] { c o lo r:g re e n; }属性选择器。比如上述代码匹配的是带有title属性的链接元素。 兼容浏览器IE7+、 Firefox、 Chrome、 Safari、 Opera 11.X[title=\a[href=\http://css9.net\ colo r: #1 f6053; }属性选择器。 上面的代码匹配所有拥有href属性且href为http://css9.net的所有链接。 这个功能很好但是多少又有些局限。如果我们希望匹配href包含css9.net的所有链接该怎么做呢看下一个选择器。

兼容浏览器 IE7+、 Firefox、 Chrome、 Safari、Opera 12.X[t it le*=\

4

百度搜索“就爱阅读”,专业资料、生活学习,尽在就爱阅读网92to.com,您的在线图书馆!

5