日期:2014-05-16  浏览次数:20626 次

30个你必须记住的CSS选择符

所以你学会了基础的id,类和后代选择符,然后你就一直用它们了吗?如果是这样,你丢失了(css的)巨大的灵活性。在本文中提到的很多选择器属于CSS3规范的一部分,因此,只有在现代浏览器中才可使用。

1.*

* {  
 margin: 0;  
 padding: 0;  
}

对于初学者,在学习更多高级选择器之前,最先了解的选择器。

星号选择器将匹配页面里的每一个元素。很多开发者使用这个技巧将外边距和内边距重置为零。虽然在快速测试时这确实很好用,但我建议你永远不要再生产代码中使用它。它给浏览器带来大量不必要的负担。

* 也能作为子选择符使用。

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

这将匹配#container div的每一个后代元素。再次强调,尽量不要使用这种技术。

查看例子

兼容性

  • IE6+
  • Firefox
  • Chrome
  • Safari
  • Opera

2.#X

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

井号前缀允许我们选择id。这是最常见的用法,不过应该慎重使用ID选择器。

反复问自己:我一定需要id来匹配要选择的元素吗?

id选择符是唯一的,不允许重复使用。如果可能的话,先尝试使用一个标签名称,一个新的HTML5元素,甚至是一个伪类。

查看例子

兼容性

  • IE6+
  • Firefox
  • Chrome
  • Safari
  • Opera

3. .X