你必须记住的30个CSS选择器_html/css_WEB-ITnose

开篇

有30个CSS选择器你必须烂熟于心，它们适应于当今各大主流浏览器。

1.*

* {  margin: 0;  padding: 0;} 

*选择器选择的是每一个单一元素。很多程序员用上面的CSS将所有元素的margin和padding清零。虽然这是有效的，但最好还是别这么做，这会使得浏览器的负担很重。

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

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

这会使#container所有孩子都有border，但还是那句话，如果不是必须得这么做，还是别用星选择器。

view demo

Compatibility IE6+ Firefox Chrome Safari Opera 2.#x

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

id选择器的优先级很高，因此在用之前问问自己：我仅仅是为了找到这个元素而去给他加id的吗？

view demo

Compatibility IE6+ Firefox Chrome Safari Opera 3..x

.error {  color: red;} 

class选择器和id选择器不同，首先优先级没有id高，再者id选择器只能选择一个，而class选择器则可以筛选出来一组。

view demo

Compatibility IE6+ Firefox Chrome Safari Opera 4.x y

li a {  text-decoration: none;} 

当不是选择所有后代时，后代选择器将会非常有用，但有一点得注意：如果你的选择器是x y z a b.error, 那你就用错了。你得问问自己是否需要应用每一层？

view demo

Compatibility IE6+ Firefox Chrome Safari Opera 5.x

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

如果想选择同一类元素，那就不要用id或class了，直接用元素选择器。

view demo

Compatibility IE6+ Firefox Chrome Safari Opera 6.x:visted and x:link

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

我们常常用伪类:link筛选a标签是还未被点击；而用:visited去筛选哪些别点击过了。

view demo

Compatibility IE7+ Firefox Chrome Safari Opera 7.x + y

ul + p {   color: red;} 

相邻选择器会选择第一个相邻的元素，如上面的例子会让ul后第一个段落的字体变为红色（而ul与p之间是不能有其他元素的）。

view demo

Compatibility IE7+ Firefox Chrome Safari Opera 8.x > y

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

这也是一种后代选择器，但它与x y这种后代选择器不同，它只能选择直系后代。如：

            List Item                      Child                          List Item          List Item          List Item

      
查看更多关于你必须记住的30个CSS选择器_html/css_WEB-ITnose的详细内容...
        

          
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://haodehen.cn/did112411