CSS选择器
基础选择器
元素选择器
类选择器
ID选择器
通配符选择器
匹配所有元素，一般用于兼容器
格式：*+声明块
例：*{color:red;}
并集选择器
格式：元素或类或ID+","+元素或类或ID+声明块
例子：h1,h2,h3{color:red;}
p,.container,#box{background-color:deeppink;}
层次选择器
【子集选择器】
格式：父级元素名称+">"+子级元素名称+声明块
例子：div>p{color:red;}
【后代选择器】
格式：祖先元素名称+"空格"+后代元素名称+声明块
例子：div p{color:red;}
【兄dei选择器】
格式：兄弟元素A+"+"+兄弟元素B+声明块
例子：div+p{color:red;}
注：只能选中元素A后面的第一个元素
【通用选择器】
格式：兄弟元素A+"~"+兄弟元素B+声明块
例子：div~p{color:red;}
注：表示可以选择元素A后面任意位置的同级元素
伪类选择器
【动态伪类选择器】
未访问
格式：a +":"+"link"+声明块
例子：a:link{color:black;}
已访问(访问后）
格式：a +":"+"visited"+声明块
例子：a:visited{color:green;}
悬停（鼠标停留在链接上时的样式）
格式：a +":"+"hover"+声明块
例子：a:hover{color:deeppink;}
点击时
格式：a +":"+"active"+声明块
例子：a:active{color:deeppink;}
以上四个伪类书写顺序
A方案：
link,visited,focus,hover,active
B方案：
visited,link,focus,hover,active
焦点框（多用于输入框肯链接，使用时声明顺序在第三位）
格式：a +":"+"focus"+声明块
a:focus{color:五光十色；}
注：IE7以前是不支持:focus
注：IE6以前是不支持:hover,active
一次性生成层级结构标签：
header>nav>a*10
结构伪类选择器
格式：元素名称+":nth-child(n)"+{声明块}
例子： h1:nth-child(5){color:gray;}
表示选中第5个h1元素，颜色为灰色
表示选中第5个元素，并且满足是h1的情况，才会应用样式
注：（n）中的n表示元素的位置
格式：元素名称+":nth-of-type(n)"+{声明块}
例子： h1:nth-of-type(5){color:gray;}
表示选中类别为h1的第5个h1
表示先筛选出所有的h1标签，然后在结果里选中第5个h1
格式：元素名称+":first-child"+{声明块}
例子： h1:first-child{color:gray;}
表示选中第1个h1元素
格式：元素名称+":last-child"+{声明块}
例子： h1:last-child{color:gray;}
表示选中最后1个h1元素
格式：元素名称+":nth-child(odd)"+{声明块}
例子： h1:nth-child(odd){color:gray;}
表示选中奇数项(2n+1)
格式：元素名称+":nth-child(even)"+{声明块}
例子： h1:nth-child(even){color:gray;}
表示选中偶数项(2n)
[否定伪类选择器]
格式：元素名称+":not(相应的选择条件)"+{声明块}
例子： h1:not(:nth-child(3)){color:gray;}
表示除第3个h1元素，都应用样式
body>h2:only-of-type{......}
表示body只包含一个h2类型元素时属性生效
body>h2:only-child{......}
表示body第一个子元素为h2类型时，属性生效
伪元素选择器
格式：元素名称+":"+"before"+｛content:"加的内容"｝
例子：h1:before{
content: "F51";
}
表示在元素前面加内容
格式：元素名称+":"+"after"+｛content:"加的内容"｝
例子：h1:after{
content: "F51";
}
表示在元素后面加内容
p:first-line{....}给p标签的第一行加样式属性
p:first-letter{....}给p标签的第一个字加样式属性