###CSS选择器
CSS3选择器规范地址： https://www.w3.org/TR/2011/REC-css3-selectors-20110929/
CSS3选择最新选择器规范: https://www.w3.org/TR/selectors
!---问题---!
1.css的全称是什么？
2.样式表的组成
3.浏览器读取编译css的顺序？
1.基本选择器
/*通配符选择器*/ * { margin: 0; padding: 0; border: none; }
/*元素选择器*/ body { background: #eee; }
/*类选择器*/ .list { list-style: square; }
/*ID选择器*/ #list { width: 500px; margin: 0 auto; }
/*后代选择器*/ .list li { background: #abcdef; }
2.基本选择器扩展
/*子元素选择器*/ #wrap > .inner {color: pink;}
也可称为直接后代选择器,此类选择器只能匹配到直接后代，不能匹配到深层次的后代元素
/*相邻兄弟选择器*/ #wrap #first + .inner {color: #f00;}
它只会匹配紧跟着的兄弟元素
/*通用兄弟选择器*/ #wrap #first ~ div { border: 1px solid;}
它会匹配所有的兄弟元素(不需要紧跟)
/*选择器分组*/ h1,h2,h3{color: pink;}
此处的逗号我们称之为结合符
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的元素。
4.伪类与伪元素选择器
/*链接伪类*/ 注意:link，:visited，:target是作用于链接元素的！
:link 表示作为超链接，并指向一个未访问的地址的所有锚
:visited 表示作为超链接，并指向一个已访问的地址的所有锚
:target 代表一个特殊的元素，它的id是URI的片段标识符
/*动态伪类*/ 注意:hover，:active基本可以作用于所有的元素！
:hover 表示悬浮到元素上
:active 表示匹配被用户激活的元素（点击按住时）
由于a标签的:link和:visited可以覆盖了所有a标签的状态，所以当:link，:visited，:hover，:active同时出现在a标签，:link和:visited不能放在最后！！！
:target 其实表示的就是#div1，在a标签被点击， URI的片段标识符#div1->div1
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
a{
text-decoration: none;
color: deeppink;
}
div{
width: 200px;
height: 200px;
background: pink;
display: none;
text-align: center;
font: 50px/200px "微软雅黑";
}
:target{
display: block;
}
</style>
</head>
<body>
<a href="#div1">div1</a>
<div >div1</div>
</body>
</html>
//可以通过css来实现点击链接，div选项卡功能
隐私与:visited选择器
只有下列的属性才能被应用到已访问链接：
color
background-color
border-color
/*表单相关伪类*/
:enabled 匹配可编辑的表单
:disable 匹配被禁用的表单
:checked 匹配被选中的表单
:focus 匹配获焦的表单
5:自定义单选按钮
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*自定义样式*/
*{
margin: 0;
padding: 0;
}
label{
position: relative;
float: left;
width: 200px;
height: 200px;
border: 2px solid;
border-right:1px ;
border-radius: 50%;
overflow: hidden;
}
input{
position: absolute;
left: -50px;
top: -50px;
/*隐藏掉选择框按钮*/
}
label > span{
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
}
input:checked +span{
background-color: aqua;
}
</style>
</head>
<body>
<!--
自定义单选按钮
-->
<label >
<input type="radio" name="class" />
<span></span>
</label>
<label >
<input type="radio" name="class" />
<span></span>
</label>
<label >
<input type="radio" name="class" />
<span></span>
</label>
<label >
<input type="radio" name="class" />
<span></span>
</label>
</body>
</html>
6：结构性伪类
结构性伪类
ele:nth-child(index)
ele:nth-of-type(index) 以元素为中心
区别：
1.nth-child找到第index个子元素 这个子元素必须满足ele的规则
nth-of-type找到底index个ele子元素
2.nth-of-type以元素为中心
注意：
index可以是变量n（只能是n 0到正无穷）
odd：奇数
even：偶数
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*结构性伪类*/
/* nth-child */
#warp>li:nth-child(1){
background-color: pink;
}
/*表示#warp下所有的孩子，并且是第一个孩子，并且这个元素是li*/
#warp>p:nth-child(2){
background-color: pink;
/*表示#warp下所有的孩子，并且是第二个孩子，并且这个元素是p*/
}
#warp p:first-child{
color: yellow;
/*#warp p:first-child warp下第一个孩子，而且第一个孩子是p元素*/
}
#warp p:only-child{
background-color: red;
/* #warp p:only-child warp只有一个孩子，孩子为p元素*/
}
/* nth-of-type 没有孩子的这个限制 */
#warp p:first-of-type{
/*warp下的第一个p元素*/
color: hotpink;
}
</style>
</head>
<body>
<ul >
<p>frist-of-p</p>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
</ul>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#warp .inner:nth-of-type(1){
background-color: red;
}
/*nth-of-type 是以元素为主体*/ 下方所有的元素都会被选中
</style>
</head>
<body>
<ul >
<p >p</p> //RED
<span >span</span>//RED
<div >div</div> //RED
</ul>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
ul>li{
list-style: none;
float: left;
width: 200px;
height: 200px;
background-color: #000000;
}
/*所有li加上右边框，最后一个除外*/
li:not(:last-of-type) {
border-right:#00FFFF 2px solid ;
}
/*empty 选中内容为空的元素*/
li:empty{
background-color: hotpink;
}
</style>
</head>
<body>
<ul>
<li></li>
<li></li>
<li>3</li>
<li></li>
</ul>
</body>
</html>
7：伪元素
::after
::before
：：after 清除浮动
8：声明的优先级
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[]（0,0,1,1） 和 #test（0,1,0,0）
重要声明
有时某个声明比较重要，超过了所有其他声明，css2.1就称之为重要声明
并允许在这些声明的结束分号之前插入 !important 来标志
必须要准确的放置 !important 否则声明无效。
!important 总是要放在声明的最后，即分号的前面
标志为 !important的声明并没有特殊的特殊性值，不过要与非重要声明分开考虑。
实际上所有的重要声明会被浏览器分为一组，重要声明的冲突会在其内部解决
非重要声明也会被分为一组，非重要声明的冲突也会在其内部解决
如果一个重要声明与非重要声明冲突，胜出的总是重要声明
继承
继承没有特殊性，甚至连0特殊性都没有
0特殊性要比无特殊性来的强
来源
css样式的来源大致有三种
创作人员
读者
用户代理
权重：
&n