CSS3中中31种选择器使用方法教程种选择器使用方法教程
本人为大家介绍了30 种最常用的 CSS 选择器用法，多加了一种，变成了牢记 31 种选择器用法
原文 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;}
临近选择器 (adjacent selector)，选取紧邻在 X 元素后面出现的第一个元素，比如上面这段代码将选取 ul 元素后出现的第一个元素，也就是 p 元素。
兼容性 IE6+
8. X > Y
div#container > ul { border: 1px solid black;}
在第 4 条中，后代选择器 X Y 选取父层 X 内的所有 Y 元素；子选择器 X > Y 则只选取直接出现在父层 X 内的 Y 元素。比如下面的 HTML 结构
中，#container > ul 选取直接出现在 div#container 内的 ul 元素，不包含嵌套在 li 内的 ul 元素：
<div id="container"> <ul> <li> List Item <ul> <li> Child </li> </ul> </li> <li> List Item </li> <li> List Item </li> <li> List Item </li> </ul></div>
兼容 IE6+
9. X ~ Y
ul ~ p { color: red;}
同样也是临近选择器，前面第 7 条 X + Y 选取紧邻在 X 后出现的第一个元素，而 X ~ Y 将选取 X 元素后出现的所有同级元素。上面这段代码将选取 ul
元素后出现的所有同级 p 元素，而不是像 ul + p 这样选取第一个出现的 p 元素。
兼容 IE7+
评论0
最新资源