CSS选择器
1什么是选择器
选择器（selector），会告诉浏览器：网页上的那些元素需要设置什么样式。
作用：
按照 CSS 规则定位 HTML 页面的一个或多个元素。浏览器在解析 HTML 页面时，会根据 CSS 规则中的选择器定位 HTML 页面的元素，并为对应的元素设定样式。通过 CSS 选择器可以实现对 HTML 元素的一对一、一对多和多对一的定位。
2 选择器分类
2.1 常用选择器
2.1.1 元素选择器（标签选择器）
元素选择器（标签选择器），可以根据标签的名字来从页面中选取指定的元素
语法：
标签名{}示例：
为所有P元素设置黄色背景颜色
<head>
<meta charset="UTF-8">
<title>CSS选择器</title>
<style type="text/css">
/*
元素选择器（标签选择器）：设置h3标签颜色为红色
**/
h3{
background-color: red;
}
</style>
</head>
<body>
<h3>一剪梅·舟过吴江</h3>
<div>作者：蒋捷 宋代</div>
<div>一片春愁待酒浇。</div>
<div>江上舟摇，楼上帘招。</div>
<div>秋娘渡与泰娘桥，风又飘飘，雨又萧萧。</div>
<div>何日归家洗客袍？</div>
<div>银字笙调，心字香烧。</div>
<div>流光容易把人抛，红了樱桃,绿了芭蕉。</div>
</body>效果：
2.1.2 类选择器
类选择器，可以根据元素的class属性值选取元素。class属性可以重复，拥有相同class属性值的元素，我们也可以说他们是一组元素。
语法：
.className { }示例：
设置所class名称为poetry背景颜色为灰色
<head>
<meta charset="UTF-8">
<title>CSS选择器</title>
<style type="text/css">
/*
元素选择器（标签选择器）：设置h3标签颜色为红色
**/
h3{
color: red;
}
/**
* 类选择器 可以根据元素的class属性值选取元素
*/
.poetry{
background-color: #CCC;
}
</style>
</head>
<body>
<h3>一剪梅·舟过吴江</h3>
<div class="poetry">作者：蒋捷 宋代</div>
<div class="poetry">一片春愁待酒浇。</div>
<div class="poetry">江上舟摇，楼上帘招。</div>
<div class="poetry">秋娘渡与泰娘桥，风又飘飘，雨又萧萧。</div>
<div class="poetry">何日归家洗客袍？</div>
<div class="poetry">银字笙调，心字香烧。</div>
<div class="poetry">流光容易把人抛，红了樱桃,绿了芭蕉。</div>
</body>效果：
2.1.3 ID选择器
通过元素的id属性值选中唯一的一个元素。id属性值在同一HTML页面中不可以重复
语法：
#id { }示例：
给id为author的标签设置字体颜色为蓝色，宽度为300px,文字靠右显示
<head>
<meta charset="UTF-8">
<title>CSS选择器</title>
<style type="text/css">
/*
元素选择器（标签选择器）：设置h3标签颜色为红色
**/
h3{
color: red;
}
/**
* 类选择器 可以根据元素的class属性值选取元素
*/
.poetry{
background-color: #CCC;
}
/**
* ID选择器 通过元素的id属性值选中唯一的一个元素
*/
#author{
color: blue;
width: 300px;
text-align: right;
}
</style>
</head>
<body>
<h3>一剪梅·舟过吴江</h3>
<div id="author">作者：蒋捷 宋代</div>
<div class="poetry">一片春愁待酒浇。</div>
<div class="poetry">江上舟摇，楼上帘招。</div>
<div class="poetry">秋娘渡与泰娘桥，风又飘飘，雨又萧萧。</div>
<div class="poetry">何日归家洗客袍？</div>
<div class="poetry">银字笙调，心字香烧。</div>
<div class="poetry">流光容易把人抛，红了樱桃,绿了芭蕉。</div>
</body>效果：
2.1.4 复合选择器
复合选择器，可以同时使用多个选择器，这样可以选择同时满足多个选择器的元素
语法：
选择器1选择器2{}示例：
给具有box1这个class的div设置字体颜色为绿色
<head>
<meta charset="UTF-8">
<title>CSS选择器</title>
<style type="text/css">
/*
元素选择器（标签选择器）：设置h3标签颜色为红色
**/
h3{
color: red;
}
/**
* 类选择器 可以根据元素的class属性值选取元素
*/
.poetry{
background-color: #CCC;
}
/**
* ID选择器 通过元素的id属性值选中唯一的一个元素
*/
#author{
color: blue;
width: 300px;
text-align: right;
}
/**
* 复合选择器，可以同时使用多个选择器，这样可以选择同时满足多个选择器的元素
*/
div.box1{
color: green;
}
</style>
</head>
<body>
<h3 class="box1">一剪梅·舟过吴江</h3>
<div id="author">作者：蒋捷 宋代</div>
<div class="poetry box1">一片春愁待酒浇。</div>
<div class="poetry">江上舟摇，楼上帘招。</div>
<div class="poetry">秋娘渡与泰娘桥，风又飘飘，雨又萧萧。</div>
<div class="poetry">何日归家洗客袍？</div>
<div class="poetry">银字笙调，心字香烧。</div>
<div class="poetry">流光容易把人抛，红了樱桃,绿了芭蕉。</div>
</body>效果：
2.1.5 群组选择器
群组选择器，可以同时使用多个选择器，多个选择器将被同时应用指定的样式
语法：
选择器1,选择器2,选择器3 { }示例：
给.box1，#author设置字体大小为30px
<head>
<meta charset="UTF-8">
<title>CSS选择器</title>
<style type="text/css">
/*
元素选择器（标签选择器）：设置h3标签颜色为红色
**/
h3{
color: red;
}
/**
* 类选择器 可以根据元素的class属性值选取元素
*/
.poetry{
background-color: #CCC;
}
/**
* ID选择器 通过元素的id属性值选中唯一的一个元素
*/
#author{
color: blue;
width: 300px;
text-align: right;
}
/**
* 复合选择器，可以同时使用多个选择器，这样可以选择同时满足多个选择器的元素
*/
div.box1{
color: green;
}
/**
* 群组选择器，可以同时使用多个选择器，多个选择器将被同时应用指定的样式
*/
.box1, #author{
font-size: 30px;
}
</style>
</head>
<body>
<h3 class="box1">一剪梅·舟过吴江</h3>
<div id="author">作者：蒋捷 宋代</div>
<div class="poetry box1">一片春愁待酒浇。</div>
<div class="poetry">江上舟摇，楼上帘招。</div>
<div class="poetry">秋娘渡与泰娘桥，风又飘飘，雨又萧萧。</div>
<div class="poetry">何日归家洗客袍？</div>
<div class="poetry">银字笙调，心字香烧。</div>
<div class="poetry">流光容易把人抛，红了樱桃,绿了芭蕉。</div>
</body>效果：
2.1.6 通用选择器
通用选择器，可以同时选中页面中的所有元素
语法：
*{ }示例：
设置所有元素背景颜色为黄色
<head>
<meta charset="UTF-8">
<title>CSS选择器</title>
<style type="text/css">
/*
元素选择器（标签选择器）：设置h3标签颜色为红色
**/
h3{
color: red;
}
/**
* 类选择器 可以根据元素的class属性值选取元素
*/
.poetry{
background-color: #CCC;
}
/**
* ID选择器 通过元素的id属性值选中唯一的一个元素
*/
#author{
color: blue;
width: 300px;
text-align: right;
}
/**
* 复合选择器，可以同时使用多个选择器，这样可以选择同时满足多个选择器的元素
*/
div.box1{
color: green;
}
/**
* 群组选择器，可以同时使用多个选择器，多个选择器将被同时应用指定的样式
*/
.box1, #author{
font-size: 30px;
}
/**
*通用选择器，可以同时选中页面中的所有元素
*/
*{
background-color: yellow;
}
</style>
</head>
<body>
<h3 class="box1">一剪梅·舟过吴江</h3>
<div id="author">作者：蒋捷 宋代</div>
<div class="poetry box1">一片春愁待酒浇。</div>
<div class="poetry">江上舟摇，楼上帘招。</div>
<div class="poetry">秋娘渡与泰娘桥，风又飘飘，雨又萧萧。</div>
<div class="poetry">何日归家洗客袍？</div>
<div class="poetry">银字笙调，心字香烧。</div>
<div class="poetry">流光容易把人抛，红了樱桃,绿了芭蕉。</div>
</body>效果：
注意：为什么诗词部分背景颜色没有变成黄色
关于CSS的选择器优先级我在w3school文档中并没有看到对应说明，网上比较笼统的说法是:
important > 内联 > ID > 类 > 标签 | 伪类 | 属性选择 > 伪对象 > 继承 > 通配符，因此通配符优先级最低，故诗词部分背景颜色没有变成黄色
2.1.7 后代选择器
在介绍后代选择器之前，我们先说明一下元素之间的关系
标签之间的关系
祖先元素
– 直接或间接包含后代元素的元素。
后代元素
– 直接或间接被祖先元素包含的元素。
父元素
– 直接包含子元素的元素。
子元素
– 直接被父元素包含的元素。
兄弟元素
– 拥有相同父元素的元素。
示例：
<!--
class为box1的div直接包含的后代元素有class名称为box2，box3的div，因此box1是box2，box3的父元素，box2,box3相对box1来说则是box1的子元素。
同样，box2是text1的父元素，text1是box2的子元素；box3是text2的父元素，text2是box3的子元素。
因为box1包含box2，而box2包含text1，因此box1是text1的祖先元素，text1是box1的后代元素。
父元素也属于祖先元素，因此我们也可以说box2是box1的后代元素，box1是box2的祖先元素
拥有相同父元素的元素，因此在示例中只有box2与box3是兄弟元素
-->
<div class="box1">
<div class="box2">
<span class="text1"></span>
</div>
<div class="box3">
<span class="text2"></span>
</div>
</div>后代选择器可以根据标签的关系，为处在元素内部的代元素设置样式
语法：
祖先元素 后代元素 后代元素 { }示例：
<head>
<meta charset="UTF-8">
<title>CSS选择器</title>
<style type="text/css">
/**
* 后代选择器 设置class属性值为box1的class属性值为box2的子元素的text1字体颜色为红色
*/
.box1 .box2 .text1{
color: red;
}
</style>
</head>
<body>
<h3>一剪梅·舟过吴江</h3>
<div >作者：蒋捷 宋代</div>
<div class="box1">
<div class="box2">
<span class="text1">一片春愁待酒浇。</span>
</div>
<div class="box3">
<span class="text2">江上舟摇，楼上帘招。</span>
</div>
</div>
</div>
<div class="poetry">秋娘渡与泰娘桥，风又飘飘，雨又萧萧。</div>
<div class="poetry">何日归家洗客袍？</div>
<div class="poetry">银字笙调，心字香烧。</div>
<div class="poetry">流光容易把人抛，红了樱桃,绿了芭蕉。</div>
</body>
效果：
2.1.8 伪类和伪元素
有时候，你需要选择本身没有标签，但是仍然易于识别的网页部位，比如段落首行或鼠标滑过的连接。CSS为他们提供一些选择器：伪类和伪元素。有四个伪类可以让你根据访问者与该链接的交互方式，将链接设置成4种不同的状态
语法：
正常链接 a:link
访问过的链接 a:visited（只能定义字体颜色）
鼠标滑过的链接 a:hover
正在点击的链接 a:active所有标签都具有鼠标滑过 :hover，正在点击 :active 两个伪类，需要注意的是伪类的优先级都是一样的，因此顺序必须是l v h a,如果:active在:hover之前则:active不生效。如果:link或者:visited在:hover或:active 之后，则:hover或:active不生效
示例：
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/**
* 正常链接
*/
a:link{
color: red;
}
/**
* 访问过的链接
*/
a:visited{
color: green;
}
/**
* 鼠标滑过的链接 紫色
*/
a:hover{
color: blueviolet;
}
/**
* 正在点击的链接
*/
a:active{
color: yellow;
}
</style>
</head>
<body>
<a href="#c">正常连接</a>
<a href="#">访问过的链接（只能定义字体颜色</a>
<a href="#b">鼠标滑过的链接</a>
<a href="#a">正在点击的链接</a>
</body>效果：
2.1.9 否定伪类
否定伪类可以帮助我们选择不是其他东西的某件东西
语法：
:not(选择器){}示例：
<head>
<meta charset="UTF-8">
<title>否定伪类</title>
<style type="text/css">
/* 选择所要p标签但是不包括class为hello*/
p:not(.hello){
background-color: #BBAAFF;
}
</style>
</head>
<body>
<p>我是一个段落</p>
<p class="hello">我是一个段落</p>
<p>我是一个段落</p>
<p class="hello">我是一个段落</p>
<p>我是一个段落</p>
</body>效果：
2.1.10 其他伪类
语法：
获取焦点（用于设置input获取焦点时样式）
– :focus
选中的元素
注意：(::selection选择器匹配元素中被用户选中或处于高亮状态的部分。::selection只可以应用于少数的CSS属性：color, background, cursor,和outline。)
– ::selection示例：
<head>
<meta charset="UTF-8">
<title>其他伪类</title>
<style type="text/css">
input:focus{
border: 1px solid #BBAAFF;
border-radius: 5px;
outline: none;
}
p::selection{
background-color: #BBAAFF;
color: #FFF;
}
</style>
</head>
<body>
获取焦点
<hr />
<input type="text"/>
<br/>
选中的文字
<hr />
<p>::selection伪类可以设置选中文字的样式，但是需要在注意浏览器的兼容性</p>
</body>效果：
2.2 其他选择器
2.2.1 伪元素
在元素的特殊的位置，设置样式
语法：
指定元素前（添加文本）
– :before
指定元素后（添加文本）
– :after
首字母
– :first-letter
首行
– :first-line示例：
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
p:before{
content: '添加文本在元素之前';
background-color: orange;
}
p:after{
content: '添加文本在元素之后';
background-color: orange;
}
p:first-letter{
color: orange;
font-size: 48px;
}
p:first-line{
background-color: #BBAAFF;
}
</style>
</head>
<body>
指定元素前（添加文本）<br/>
– :before<br/>
<p>-试试指定元素前添加文本-</p>
指定元素后（添加文本）<br/>
– :after<br/>
<p>-试试指定元素后添加文本-</p>
首字母<br/>
– :first-letter<br/>
<p>试试首字母字体变大，试试首字母字体变大，试试首字母字体变大，试试首字母字体变大，试试首字母字体变大，试试首字母字体变大，试试首字母字体变大，试试首字母字体变大，</p>
首行<br/>
– :first-line<br/>
<p>设置第一行背景颜色。设置第一行背景颜色。设置第一行背景颜色。设置第一行背景颜色。设置第一行背景颜色。</p>
</body>效果：
2.3 属性选择器
2.3.1 属性选择器
属性选择器可以根据元素的属性及属性值来选择元素
语法：
[属性名] 选中具有属性名的元素
[属性名="属性值"] 选取具有属性值的元素
[属性名~="属性值"] 选取包含指定值的 title 属性的所有元素设置样式。适用于由空格分隔的属性值
[属性名|="属性值"] 选取包含指定值的 lang 属性的所有元素设置样式。适用于由连字符分隔的属性值
[属性名^="属性值"] 选取属性值以指定内容开头的元素
[属性名$="属性值"] 选取属性值以指定内容结尾的元素
[属性名*="属性值"] 选取属性值包含自定内容的元素示例：
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
[title] {
color: red;
}
[title=hello] {
border: 5px solid blue;
}
[title~=hello] {
color: red;
}
[lang|=en] {
color: red;
}
</style>
</head>
<body>
<h3>[属性名]可以应用样式：</h3>
<h2 title="Hello world">Hello world</h2>
<a title="hello">Hello world</a>
<hr />
<h3>[属性名]无法应用样式：</h3>
<h2>Hello world</h2>
<a>Hello world</a>
<h3>[属性名="属性值"]可以应用样式：</h3>
<p title="hello">我是一个段落</p>
<br />
<a title="hello" href="http://hello.com.cn">hello</a>
<hr />
<h3>[属性名="属性值"]无法应用样式：</h3>
<p title="greeting">Hi!</p>
<a class="hello" href="http://hello.com.cn">hello</a>
<h3>[属性名~="属性值"]可以应用样式：</h3>
<h2 title="hello world">Hello world</h2>
<p title="student hello">Hello hello students!</h3>
<hr />
<h3>[属性名~="属性值"]无法应用样式：</h3>
<h2 title="world">Hello world</h2>
<p title="student">Hello hello students!</p>
<h3>[属性名|="属性值"]可以应用样式：</h3>
<p lang="en">Hello!</p>
<p lang="en-us">Hi!</p>
<hr />
<h3>[属性名|="属性值"]无法应用样式：</h3>
<p lang="us">Hi!</p>
<p lang="zh">Hao!</p>
</body>效果：
2.4 子元素选择器
2.4.1 子元素选择器
子元素选择器可以给另一个元素的子元素设置样式
语法：
父元素 > 子元素 {}示例：
<head>
<meta charset="UTF-8">
<title>子元素选择器</title>
<style type="text/css">
.hello > span{
background-color: #BBAAFF;
color: #FFF;
}
</style>
</head>
<body>
<div class="hello">
<p>我是一个段落</p>
<span>我是一个span</span>
<div>我是一个div</div>
</div>
</body>效果：
2.4.2 其他子元素选择器
语法：
:first-child – 选择第一个子标签
:last-child – 选择最后一个子标签
:nth-child – 选择指定位置的子元素
特殊用法： :nth-child(even) even表示偶数位置
:nth-child(odd) odd表示奇数位置
– 选择指定类型的子元素(first-of-type与first-child非常类似，不同的是-child在所有的子元素中排序，而-type只在当前类型中排序)
:first-of-type
:last-of-type
:nth-of-type
示例：
<head>
<meta charset="UTF-8">
<title>其他子元素选择器</title>
<style type="text/css">
p:first-child {
background-color: #BBAAFF;
}
p:last-child {
background-color: orange;
color: #FFF;
}
span:nth-child(1) {
font-size: 20px;
}
span:nth-child(even) {
background-color: #AABBFF;
}
span:nth-child(odd) {
background-color: #FFBBAA;
}
/*p:first-of-type{
background-color: #BBAAFF;
}
p:last-of-type-of-type{
background-color: orange;
color: #FFF;
}
span:nth-of-type(even){
background-color: #AABBFF;
}
span:nth-of-type(odd){
background-color: #FFBBAA;
}*/
</style>
</head>
<body>
<div class="hello">
<p>我是一个段落</p>
<p>我是一个段落</p>
<p>我是一个段落</p>
<span>我是一个span</span>
<span>我是一个span</span>
<span>我是一个span</span>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>
<p>我是div中的P标签</p>
<p>我是div中的P标签</p>
<p>我是div中的P标签</p>
<span>我是div中的一个span</span>
<span>我是div中的一个span</span>
<span>我是div中的一个span</span>
<span>我是div中的一个span</span>
<span>我是div中的一个span</span>
<p>我是div中的P标签</p>
<p>我是div中的P标签</p>
<p>我是div中的P标签</p>
</div>
</div>
</body>效果：
-child效果：
-type效果:
2.5 兄弟元素选择器
2.5.1 兄弟元素选择器
除了根据祖先父子关系，还可以根据兄弟关系查找元素
语法：
– 查找后边一个兄弟元素（可以选择紧挨着兄弟元素后的一个兄弟元素）
兄弟元素 + 兄弟元素{}
– 查找后边所有的兄弟元素
兄弟元素 ~ 兄弟元素{}示例：
<head>
<meta charset="UTF-8">
<title>兄弟元素选择器</title>
<style type="text/css">
/* 选择紧挨着平P标签的span*/
p + span{
background-color: #BBAAFF;
}
/* 查找后边所有的兄弟元素 */
p ~ div {
background-color: orange;
}
</style>
</head>
<body>
<p>我是一个P标签</p>
<p>我是一个P标签</p>
<p>我是一个P标签</p>
<span>我是一个span</span>
<span>我是一个span</span>
<span>我是一个span</span>
<p>我是一个P标签</p>
<p>我是一个P标签</p>
<p>我是一个P标签</p>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<span>我是一个span</span>
<span>我是一个span</span>
<span>我是一个span</span>
</body>效果：
3 总结
3.1基本选择器
通配符选择器
* { margin: 0; padding: 0; border: none; }
元素选择器
body { background: #eee; }
类选择器
.list { list-style: square; }
ID选择器
#list { width: 500px; margin: 0 auto; }
后代选择器
.list li { margin-top: 10px; background: #abcdef; }
3.2 基本选择器扩展
子元素选择器 也可称为直接后代选择器,此类选择器只能匹配到直接后代，不能匹配到深层次的后代元素
#wrap > .inner {color: pink;}
相邻兄弟选择器 它只会匹配紧跟着的兄弟元素
#wrap #first + .inner {color: #f00;}
通用兄弟选择器 它会匹配所有的兄弟元素(不需要紧跟)
#wrap #first ~ div { border: 1px solid;}
选择器分组 此处的逗号我们称之为结合符
h1,h2,h3{color: pink;}
3.3 属性选择器
存在和值属性选择器
[attr]：该选择器选择包含 attr 属性的所有元素，不论 attr 的值为何。
[attr=val]：该选择器仅选择 attr 属性被赋值为 val 的所有元素。
[attr~=val]：表示带有以 attr 命名的属性的元素，并且该属性是一个以空格作为分隔的值列表，其中至少一个值为val。
子串值属性选择器
[attr|=val] : 选择attr属性的值是val（包括val）或以val-开头的元素。
[attr^=val] : 选择attr属性的值以val开头（包括val）的元素。
[attr$=val] : 选择attr属性的值以val结尾（包括val）的元素。
[attr*=val] : 选择attr属性的值中包含字符串val的元素。
3.4 伪类与伪元素选择器
链接伪类 注意:link，:visited，:target是作用于链接元素的！
:link 表示作为超链接，并指向一个未访问的地址的所有锚
:visited 表示作为超链接，并指向一个已访问的地址的所有锚
:target 代表一个特殊的元素，它的id是URI的片段标识符
动态伪类 注意:hover，:active基本可以作用于所有的元素！
:hover 表示悬浮到元素上
:active 表示匹配被用户激活的元素（点击按住时）
由于a标签的:link和:visited可以覆盖了所有a标签的状态，所以当:link，:visited，:hover，:active同时出现在a标签
身上时 :link和:visited不能放在最后！！！
隐私与:visited选择器
只有下列的属性才能被应用到已访问链接：
color
background-color
border-color
表单相关伪类
:enabled 匹配可编辑的表单
:disable 匹配被禁用的表单
:checked 匹配被选中的表单
:focus 匹配获焦的表单
结构性伪类
index的值从1开始计数！！！！
index可以为变量n(只能是n)
index可以为even odd
#wrap ele:nth-child(index) 表示匹配#wrap中第index的子元素 这个子元素必须是ele
#wrap ele:nth-of-type(index) 表示匹配#wrap中第index的ele子元素
除此之外:nth-child和:nth-of-type有一个很重要的区别！！
nth-of-type以元素为中心！！！
:nth-child(index)系列
:first-child
:last-child
:nth-last-child(index)
:only-child (相对于:first-child:last-child 或者 :nth-child(1):nth-last-child(1))
:nth-of-type(index)系列
:first-of-type
:last-of-type
:nth-last-type(index)
:only-of-type (相对于:first-of-type:last-of-type 或者 :nth-of-type(1):nth-last-of-type(1))
:not
:empty(内容必须是空的，有空格都不行，有attr没关系)
伪元素
::after
::before
::firstLetter
::firstLine
::selection
3.5 css声明的优先级
选择器的特殊性
选择器的特殊性由选择器本身的组件确定，特殊性值表述为4个部分，如 0,0,0,0
一个选择器的具体特殊性如下确定：
1.对于选择器中给定的ID属性值，加 0,1,0,0
2.对于选择器中给定的各个类属性，属性选择，或伪类，加 0,0,1,0
3.对于选择器中的给定的各个元素和伪元素，加0,0,0,1
4.通配符选择器的特殊性为0,0,0,0
5.结合符对选择器特殊性没有一点贡献
6.内联声明的特殊性都是1,0,0,0
7.继承没有特殊性
特殊性 1,0,0,0 大于所有以0开头的特殊性(不进位)
选择器的特殊性最终都会授予给其对应的声明
如果多个规则与同一个元素匹配，而且有些声明互相冲突时，特殊性越大的越占优势
注意：id选择器和属性选择器
div[id="test"]（0,0,1,1） 和 #test（0,1,0,0）
重要声明
有时某个声明比较重要，超过了所有其他声明，css2.1就称之为重要声明
并允许在这些声明的结束分号之前插入 !important 来标志
必须要准确的放置 !important 否则声明无效。
!important 总是要放在声明的最后，即分号的前面
标志为 !important的声明并没有特殊的特殊性值，不过要与非重要声明分开考虑。
实际上所有的重要声明会被浏览器分为一组，重要声明的冲突会在其内部解决
非重要声明也会被分为一组，非重要声明的冲突也会在其内部解决
如果一个重要声明与非重要声明冲突，胜出的总是重要声明
继承
继承没有特殊性，甚至连0特殊性都没有
0特殊性要比无特殊性来的强
来源
css样式的来源大致有三种
创作人员
读者
用户代理
权重：
读者的重要声明
创作人员的重要声明
创作人员的正常声明
读者的正常声明
用户代理的声明
层叠
1.找出所有相关的规则，这些规则都包含一个选择器
2.计算声明的优先级
先按来源排序
在按选择器的特殊性排序
最终按顺序
7万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
