清风细雨楼

CSS3中31种选择器使用方法教程
网页制作 2024/12/24 佚名
3 1
清风细雨楼 Design By www.eepep.com

原文 The 30 CSS Selectors you Must Memorize 由 Jeffrey Way 发表于 2012 年 6 月，介绍了 30 种最常用的 CSS 选择器用法，多加了一种，变成了牢记 31 种选择器用法。其他 CSS3 选择器用法请查看 CSS3 selectors explained 这篇文章，此外，W3C CSS3 选择器官方文档 Selectors Level 3 W3C Recommendation 29 September 2011 记录在这里留待有疑问的时候查看。

1. * 
* {  margin: 0;  padding: 0;}

 

星号选择器用于选取页面中的所有元素，可用于快速清除所有元素的 margin 与 padding，但最好只在测试的时候使用，而不要正式用在 CSS 文件中，否则会大大加重浏览器负担。此外，星号选择器也可以给父层的所有子元素设定样式，重复一遍，尽量少用这种方式：

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

兼容 IE6+

2. #X 
#container {  width: 960px;  margin: auto;}

id 选择器，最常见的选择器用法之一，不可重复使用。

兼容 IE6+

3. .X 
.error {  color: red;}

class 选择器，也是最常见的选择器用法之一，与 id 选择器不同的是 class 选择器可同时选取多个元素，而 id 选择器只能给一个独一无二的元素设定样式。

兼容 IE6+

4. X Y 
li a {  text-decoration: none;}

后代选择器 (descendant selector)，选取 X 元素内的所有 Y 元素，比如上面这段代码将选取 li 标签内的所有链接。

兼容 IE6+

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

标签选择器 (type selector)，用于选取 HTML 标签 (tag)。

兼容 IE6+

6. X:visited and X:link 
a:link { color: red; }a:visted { color: purple; }

:link 伪类选择器 (pseudo class selector) 用于选取所有未点击过的链接，而 :visited 则用于选取所有已访问过的链接。

兼容 IE6+

7. X + Y 
ul + p {  color: red;}