一、元素选择器
最常见的 CSS 选择器是元素选择器。换句话说，文档的元素就是最基本的选择器。
如果设置 HTML 的样式，选择器通常将是某个 HTML 元素，比如 p、h1、em、a，甚至可以是 html 本身
html {color:black;}
h1 {color:blue;}
h2 {color:silver;}二、选择器分组
1.通过分组，创作者可以将某些类型的样式“压缩”在一起，这样就可以得到更简洁的样式表。
body, h2, p, table, th, td, pre, strong, em {color:gray;}2.通配符选择器
CSS2 引入了一种新的简单选择器 - 通配选择器（universal selector），显示为一个星号（*）。该选择器可以与任何元素匹配，就像是一个通配符。例如，下面的规则可以使文档中的每个元素都为红色。
* {color:red;}三、类选择器
类选择器允许以一种独立于文档元素的方式来指定样式。该选择器可以单独使用，也可以与其他元素结合使用。
1.在使用类选择器之前，需要修改具体的文档标记，以便类选择器正常工作，例如
<h1 class="important">
This heading is very important.
</h1>
<p class="important">
This paragraph is very important.
</p>2.使用以下语法向这些归类的元素应用样式，即类名前有一个点号（.），然后结合通配选择器
*.important {color:red;}3.结合元素选择器
类选择器可以结合元素选择器来使用。
p.important {color:red;}4.多类选择器
在 HTML 中，一个 class 值中可能包含一个词列表，各个词之间用空格分隔。词的顺序无关紧要！
<p class="important warning">
This paragraph is a very important warning.
</p>我们假设 class 为 important 的所有元素都是粗体，而 class 为 warning 的所有元素为斜体，class 中同时包含 important 和 warning 的所有元素还有一个银色的背景 。就可以写作如下
.important {font-weight:bold;}
.warning {font-style:italic;}
.important.warning {background:silver;}通过把两个类选择器链接在一起，仅可以选择同时包含这些类名的元素（类名的顺序不限）。如果一个多类选择器包含类名列表中没有的一个类名，匹配就会失败。
四、ID选择器
1.ID选择器与类选择器的区别
首先ID选择器前有一个#号
其次ID选择器顾名思义引用的是id属性中的值，而不是class属性中的值
下面是一个实际例子
<html>
<head>
<style type="text/css">
#intro {font-weight:bold;}
</style>
</head>
<body>
<p id="intro">This is a paragraph of introduction.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>...</p>
</body>
</html>
2.更多ID选择器与类选择器的区别
-
a.只能在文档中使用一次:
- 与类不同，在一个 HTML 文档中，ID 选择器会使用一次，而且仅一次 b.不能使用 ID 词列表:
- 不同于类选择器，ID 选择器不能结合使用，因为 ID 属性不允许有以空格分隔的词列表 c.ID能包含更多含义:
-
类似于类，可以独立于元素来选择 ID。有些情况下，你知道文档中会出现某个特定 ID 值，但是并不知道它会出现在哪个元素上，所以你想声明独立的 ID 选择器。例如，你可能知道在一个给定的文档中会有一个 ID 值为 mostImportant 的元素。你不知道这个最重要的东西是一个段落、一个短语、一个列表项还是一个小节标题。你只知道每个文档都会有这么一个最重要的内容，它可能在任何元素中，而且只能出现一个。例如
<html>
<head>
<style type="text/css">
#mostImportant {color:red; background:yellow;}
</style>
</head>
<body>
<h1 >This is important!</h1>
<p>This is a paragraph.</p>
<p id="mostImportant">This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>...</p>
</body>
</html>3.类选择器和ID选择器可能是区分大小写的，其取决于文档的语言
五、属性选择器
属性选择器可以根据元素的属性及属性值来选择元素
1.简单的属性选择器
可以对具有某个属性的元素进行选择，写作
元素[属性] {声明;}
a[href] {color:red;}*[title] {color:red;}a[href][title] {color:red;}2.根据具体属性值进行选择
除了选择拥有某些属性的元素，还可以进一步缩小选择范围，只选择有特定属性值的元素，也可以把多个属性-值选择器链接在一起来选择一个文档
a[href="http://www.w3school.com.cn/about_us.asp"] {color: red;}
a[href="http://www.w3school.com.cn/"][title="W3School"] {color: red;}注意:属性与属性值必须完全匹配，如果属性值包含用空格分隔的值列表，匹配就可能出问题，例如
<p class="important warning">This paragraph is a very important warning.</p>要选择该元素，则应该这样写
p[class="important warning"] {color: red;}3.根据部分属性值选择
如果需要根据属性值中的词列表的某个词进行选择，则需要使用波浪号(~)，例如想选择class属性中包含important的元素，可以用下面这个选择器做到这一点
p[class~="important"] {color: red;}4.子串匹配属性选择器
- [abc^="def"]:选择 abc 属性值以 "def" 开头的所有元素
- [abc$="def"]:选择 abc 属性值以 "def" 结尾的所有元素
- [abc*="def"]:选择 abc 属性值中包含子串 "def" 的所有元素
任何属性都可以使用这些选择器
5.特定属性选择器
*[lang|="en"] {color: red;}上面这个规则会选择 lang 属性等于 en 或以 en- 开头的所有元素。因此，以下示例标记中的前三个元素将被选中，而不会选择后两个元素
<p lang="en">Hello!</p>
<p lang="en-us">Greetings!</p>
<p lang="en-au">G'day!</p>
<p lang="fr">Bonjour!</p>
<p lang="cy-en">Jrooana!</p>一般来说，[att|="val"] 可以用于任何属性及其值，假设一个 HTML 文档中有一系列图片，其中每个图片的文件名都形如 figure-1.jpg 和 figure-2.jpg。就可以使用以下选择器匹配所有这些图像
img[src|="figure"] {border: 1px solid gray;}当然，这种属性选择器最常见的用途还是匹配语言值
六、后代选择器
后代选择器(descendant selector)又称为包含选择器
后代选择器可以选择作为某元素后代的元素
可以定义后代选择器来创建一些规则，使这些规则在某些文档结构中起作用，而在另外一些结构中不起作用，例如
h1 em {color:red;}会把作为 h1 元素后代的 em 元素的文本变为 红色，其他 em 文本(如段落或块引用中的 em)则不会被这个规则选中
注意:有关后代选择器有一个易被忽视的方面，即两个元素之间的层次间隔可以是无限的；例如，如果写作 ul em，这个语法就会选择从 ul 元素继承的所有 em 元素，而不论 em 的嵌套层次多深
七、子元素选择器
1.如果不希望选择任意的后代元素，而是希望缩小范围，只选择某个元素的子元素，请使用子元素选择器(Child selector)
h1 > strong {color:red;}将选择只作为 h1 元素子元素的 strong 元素
2.结合子元素选择器与后代选择器
table.company td > p上面的选择器会选择作为 td 元素子元素的所有 p 元素，这个 td 元素本身从 table 元素继承，该 table 元素有一个包含 company 的 class 属性
八、相邻兄弟选择器
相邻兄弟选择器(Adjacent sibling selector)可选择紧接在另一元素后的元素，且二者有相同父元素
1.选择相邻兄弟
如果要增加紧接在 h1 元素后出现的段落的上边距，可以这样写
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
h1 + p {margin-top:50px;}
</style>
</head>
<body>
<h1>This is a heading.</h1>
<p>This is paragraph.</p>
<p>This is paragraph.</p>
<p>This is paragraph.</p>
<p>This is paragraph.</p>
<p>This is paragraph.</p>
</body>
</html>
2.结合其他选择器
html > body table + ul {margin-top:20px;}这个选择器解释为：选择紧接在 table 元素后出现的所有兄弟 ul 元素，该 table 元素包含在一个 body 元素中，body 元素本身是 html 元素的子元素
Ref:www.w3school.com.cn
889
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
