本篇大部分知识点源自Eric A.Mayer编著的《CSS权威指南》一书以及W3School教程网。
- 元素选择器
- 类选择器
- ID选择器
- 属性选择器
- 使用文档结构
- 后代选择器
- 选择子元素
- 选择相邻兄弟元素
- 伪类选择器
- 伪类元素选择器
元素选择器是最基本最常见的选择器，选择器通常是某个HTML元素甚至HTML本身。
html {color:black;}
h1 {color:blue;}
h2 {color:silver;}
类选择器和ID选择器允许以一种独立于文档元素的方式来指定样式，可单独使用，也可与其他元素选择器结合使用。【需要适当的标记文档才可使用】
类选择器：
<h1 class="important">
This heading is very important.
</h1>.important {color:red;}
ID选择器：
<p id="intro">This is a paragraph of introduction.</p>#intro {font-weight:bold;}与类不同，在一个 HTML 文档中，ID 选择器会使用一次，而且仅一次。
区别 2：不能使用 ID 词列表
不同于类选择器，ID 选择器不能结合使用，因为 ID 属性不允许有以空格分隔的词列表。
区别 3：ID 能包含更多含义
类似于类，可以独立于元素来选择 ID。有些情况下，您知道文档中会出现某个特定 ID 值，但是并不知道它会出现在哪个元素上，所以您想声明独立的 ID 选择器。例如，您可能知道在一个给定的文档中会有一个 ID 值为 mostImportant 的元素。您不知道这个最重要的东西是一个段落、一个短语、一个列表项还是一个小节标题。您只知道每个文档都会有这么一个最重要的内容，它可能在任何元素中，而且只能出现一个。
理论上 HTML 的 id 属性不用来表达语义，仅仅是一个标识符，取值不会影响文档的语义；而 class 会被搜索引擎或是其它 UA 认为是用来表达语义的描述，取值需要更加谨慎。
对于 CSS 很简单，你如果希望样式仅用到一个元素下面，那你可以用 #id，如果想应用到一批类似元素下，就用 .class。
由于之前提到的元素选择器、类选择器和ID选择器中使用的语法是HTML、SVG、MathML文档特定的。SO CSS2引入属性选择器。（在XML文档中很有用）
语法：
img[alt] {border: 5px solid red;} /*对所有带有属性alt的图像应用样式*/a[href="http://www.w3school.com.cn/"][title="W3School"] {color: red;} p[class~="important"] {color: red;} /*p的class中包含important即可*/
[abc^="def"] 选择 abc 属性值以 "def" 开头的所有元素
[abc$="def"] 选择 abc 属性值以 "def" 结尾的所有元素
[abc*="def"] 选择 abc 属性值中包含子串 "def" 的所有元素
[abc*="def"] 选择 abc 属性值中包含子串 "def" 的所有元素
特定属性选择类型：
语法：
*[lang|="en"] {color: red;} /*选择 lang 属性等于 en 或以 en- 开头的所有元素*/
这种属性选择器最常见的用途还是匹配语言值。
使用文档结构：
后代选择器：
语法：
h1 em {color:red;} /*把作为h1元素后代的em元素的文本变为红色*/
选择子元素：
语法：
h1 > strong {color:red;} /*把第一个h1下面出现的strong元素变成红色*/
选择相邻兄弟元素：
语法：
h1 + p {margin-top:0px;} /*去除紧接在一个h1元素后出现的段落的上边距*/选择紧接在一个h1元素后出现的所有段落，h1要与p元素有共同的父元素CSS 伪类用于向某些选择器添加特殊的效果。
1.链接伪类（锚伪类）：
a:link {color: #FF0000} /* 未访问的链接 */
a:visited {color: #00FF00} /* 已访问的链接 */
a:hover {color: #FF00FF} /* 鼠标移动到链接上 */
a:active {color: #0000FF} /* 选定的链接 */2. :first-child伪类：
例子1：
p:first-child {font-weight: bold;}
li:first-child {text-transform:uppercase;}这里第一个规则将作为某元素第一个子元素的所有 p 元素设置为粗体。第二个规则将作为某个元素（在 HTML 中，这肯定是 ol 或 ul 元素）第一个子元素的所有 li 元素变成大写。<div>
<p>These are the necessary steps:</p>
<ul>
<li>Intert Key</li>
<li>Turn key <strong>clockwise</strong></li>
<li>Push accelerator</li>
</ul>
<p>Do <em>not</em> push the brake at the same time as the accelerator.</p>
</div>
例子2：
<html>
<head>
<style type="text/css">
p > i:first-child {
font-weight:bold;
}
</style>
</head>
<body>
<p>some <i>text</i>. some <i>text</i>.</p>
<p>some <i>text</i>. some <i>text</i>.</p>
</body>
</html>
3.:lang伪类：
根据元素的语言来选择。
*:lang(fr) {font-style: italic;} /*将所有的法语元素变成斜体*/
伪类可结合：
a:link:hover {color:red;}伪元素选择器：
就像伪类为锚指定幻象类一样，伪元素能够在文档内插入假想的元素，从而达到某种效果。
1.:first-letter伪元素：
p:first-letter
{
color:#ff0000;
font-size:xx-large;
}p:first-line
{
color:#ff0000;
font-variant:small-caps;
}
另外，所有伪元素都必须放在出现该伪元素的选择器的最后面。
3.:before伪元素：
h1:before
{
content:url(logo.gif); /*在每个h1元素的内容之前加一幅图片*/
}
4.:after伪元素：
h1:after
{
content:url(logo.gif); /*在每个h1元素的内容之后加一幅图片*/
}
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
