你必要记住的30个css选取器

u1jodi1q

你亦许已然把握了id、class、后台选取器这些基本的css选取器。但这远远不是css的所有。下面向大众系统的解析css中30个最常用的选取器，包含咱们最头痛的浏览器兼容性问题。把握了它们，才可真正领略css的巨大灵活性。

*

* { margin: 0; padding: 0; }

星状选取符会在页面上的每一个元素上起功效。web设计者经常用它将页面中所有元素的margin和padding设置为0。*选取符亦能够在子选取器中运用。

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

上面的代码中会应用于id为container元素的所有子元素中。除非必要，我不意见在页面中过的的运用星状选取符，由于他的功效域太大，相当耗浏览器资源。

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

#X

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

井号功效域有相应id的元素。id是咱们最常用的css选取器之一。id选取器的优良是精细，高优先级（优先级基数为100，远高于class的10）， 做为javascript脚本钩子的不二选取，一样缺点亦很显著优先级过高，重用性差。

因此在运用id选取器前，咱们最好问下自己，真的到了非用id选取 器的地步？

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

.X

.error { color: red; }

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

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

X Y

li a { text-decoration: none; }

这亦是咱们最常用的一种选取器——后代选取器。

用于选择X元素下子元素Y，要留意的点是，这种方式的选取器将选择其下所有匹配的子元素，没视层级，因此有的状况是不宜运用的，例如以上的代码去掉li下的所有a的下划线，但li里面还有个ul，我不期盼ul下的li的a去掉下划线。

运用此后代选取器的时候要 思虑是不是期盼某样式对所有子孙元素都起功效。这种后代选取器还有个功效，便是创建类似命名空间的功效。例如以上代码样式的功效域显著为li。

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

X

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

标签选取器。运用标签选取器功效于功效域范围内的所有对应标签。优先级仅仅比*高。

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

X:visited和X:link

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

运用:link伪类功效于未点击过的链接标签。:hover伪类功效于点击过的链接。

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

X+Y

ul + p { color: red; }

相邻选取器，以上代码

啊呀呀

你的话语如春风拂面，温暖了我的心房，真的很感谢。

wrjc1hod

论坛是一个舞台，让我们在这里尽情的释放自己。

4lqedz

你的见解独到，让我受益匪浅，期待更多交流。