元素选择器
<h1>h1</h1>
<h2>h2</h2>
<h3>h3</h3>h1{}
h2{}
h1,h2,h3{}通配符：* 通配所有原元素
类选择器
<p class="c1 c2">c1c2</p>.c1{}
.c2{}
.c1 .c2{}ID选择器
<p id="i1">i1</p>#i1{}属性选择器
简单属性选择
选择有某个属性的元素，不论该元素的值是什么
<h1 class="n1">h11</h1>
<h1 class="n2">h12</h2>
<h1 class="n3">h13</h2>h1[class]{}根据具体属性值选择
有特性属性值的元素
<h1 class="n1 n2">h11</h1>
<h1 class="n2">h12</h2>h1[class="n1 n2"]{}
h1[class="n2"]{}注意：这是一个完全串匹配，所以以上两条规则分别对应上面的两个h1元素
根据部分属性值选择
有特性属性值的元素
<h1 class="n1 n2">h11</h1>
<h1 class="n2">h12</h2>h1[class~="n2"]{}根据属性值中穿线的一个用空格分隔的词来完成选择
注意：一条规则匹配了两个h1元素，等价于h1 .n2{}
- [class^=”n2”] class属性值以n2开头的所有元素
- [class~=”n2”] class属性值以n2结尾的所有元素
- [class~=”n2”] class属性值中包含字串n2的所有元素（注意，对这种字串选择器提供支持的浏览器）
特定属性选择类型
*[lang|="n2"]{}lang属性等于n2或者以n2-开头的所有元素
文档结构
后代选择器
<h1>xxxx<em>yyyy</em></h1>h1 em{}注意：两个元素的层次间隔可以是无限的，比如
<h1>xxxx<span><em>yyyy</em></span></h1>子元素选择器
<h1>h1<em>em</em></h1>h1>em{}相邻兄弟元素选择器
<ol>
<li>1</li>
<li>2</li>
<li>3</li>
</ol>li+li{}紧接在一个元素后出现的元素，两者具有共同父元素
这里选中了第二个和第三个li
伪类和伪元素
伪类
链接伪类
| 伪类名 | 描述 |
|---|---|
| :link | 作为超链接（有href属性）并指向一个未访问的地址的所有锚 |
| :visited | 作为已访问地址超链接的锚 |
a{}
a:link{}
a:visited{}注意
:link的使用可以防止样式被用到没有设置href属性的锚上
这两个伪类都是静态的，第一次显示之后不会再改变文档的样式
body的属性中有link和vlink，分别来设置指向未访问链接的锚的颜色和已访问链接的锚的颜色，不过兼容性较差（在 HTML 4.01 中，不赞成使用 body 元素的 vlink 属性；在 XHTML 1.0 Strict DTD 中，不支持 body 元素的 vlink 属性。）
<body link="red" vlink="blue">
<a href="a.html">1</a>
<a href="b.html">2</a>
</body>动态伪类
| 伪类名 | 描述 |
|---|---|
| :focus | 当前拥有输入焦点的元素 |
| :hover | 鼠标指针停留的元素 |
| :active | 用户输入激活的元素 |
注意
动态伪类可以应用的任何元素
body的属性中有alink，用来设置激活链接的颜色，不过兼容性依然差（在 HTML 4.01 中，不赞成使用 body 元素的 vlink 属性；在 XHTML 1.0 Strict DTD 中，不支持 body 元素的 vlink 属性。）
选择第一个子元素
作为第一个子元素的元素
<body>
<div>
<p>p</p>
<ul>
<li>1</li>
<li>2</li>
</ul>
</div>
</body>p:first-child{}/*作为第一个子元素的p元素*/
li:first-child{}/*作为第一个子元素的li元素*/根据语言选择
*:lang(fr){}/*括号里是语言（法语）*/伪元素
设置首字母样式
p:first-letter{}用于设置一个块级元素首字符的样式
可以运用的属性：
- font
- color
- background
- margin
- padding
- border
- text-decoration
- vertical-align (仅当 float 为 none 时)
- text-transform
- line-height
- float
- clear
设置第一行样式
p:first-line{}用于每一段所显示的第一行文本
可以运用的属性：
- font
- color
- background
- word-spacing
- letter-spacing
- text-decoration
- vertical-align
- text-transform
- line-height
- clear
设置之前之后元素的样式
p:before{content:"begin";color:red;}
p:after{content:"end";color:red;}用于在元素前后插入内容并设置此内容的样式
特殊性
选择器的特殊性依据如下规则确定：
- 内联样式的特殊性为 1.0.0.0
- ID选择器的特殊性为 0.1.0.0
- 类或者伪类的特殊性为 0.0.1.0
- 元素和伪元素的特殊性为 0.0.0.1
- 结合符和通配选择器对特殊性没有贡献，结合符是没有特殊性，通配选择器为0
从左到右进行比较排序。（1.0.0.0>0.22.22.22）
注意：
- 属性选择器([id=”xxx”])和ID选择器不同，特殊性为0.0.1.0
- 重要性采用!important，重要性声明与非重要性声明冲突，重要性声明胜出
继承
元素的属性值只会向下传递，不会向上（例外：body元素的背景样式可以传递到html，相应的定义其画布）。
注意：
- 框模型属性不能继承（外边距，内边距，背景和框）
- 继承的值没有特殊性，比0更不如，也就是说通配符比它特殊性高，用户代理的样式比它高
层叠
应用规则的顺序
- 权重与来源
读者重要声明>创作者重要声明>创作者不重要声明>读者不重要声明>用户代理声明 - 特殊性排序
- 顺序排序（最后的胜出）
注意：css2中认为内联样式和ID选择器特殊性相同为1.0.0，且出现顺序在最后
链接样式顺序：link-visited-hover-active（LVHA）
非CSS表现提示（如font元素），特殊性为0，并出现在创作人员样式表最前面，除了用户代理其他都可以将其覆盖。
273
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
