1.元素选择器
最常见的选择器就是元素选择器，文档的元素就是最基本的选择器
h1{......} a{........}
2.选择器分组
h1,h2{.......}
通配符 *
3.类选择器详解
类选择器允许以一种独立与文档元素的方式来指定样式
.class{.......}
结合元素选择器
a.class{........}
多类选择器
.class.class{.......}
4.ID选择器详解
#id{.......}
id选择器类似于类选择器，不够也有些差别，ID只能在文档中使用一次，而类可以使用多次
ID选择器不能结合使用，当使用js时候，需要用到id
5.属性选择器详解
[属性名称]{.........}
<style>
[title]{
color:red;
}
</style>
<p title="">hello</p>
根据具体属性值选择
（除了选择拥有某些的元素，还可以进一步缩小选择范围，只选择有特定属性值的元素）
例如： a[href="http:www.baidu,com"]{.........};
属性和属性值必须完全匹配
根据部分属性值选择
6.后代选择器
p strong i{.........}
7.子元素选择器
h1>strong{.........};
8.相邻兄弟选择器
可选择紧接在另一个元素后的元素，且二者有相同父元素
例： h1+p{........}
css3中的选择器
1.属性选择器
在css3中，追加了三个属性选择器分别为：
[att*=val] 包含val字符串
[att∧=val] 以val为首字符
[att$=val] 以val为结束字符
使得属性选择器有了通配符的概念。
2.结构性伪类选择器
first-line 第一行
<style>
p:first-line{
color:red;
}
</style>
<p>这是第一行内容<br/>这是第二行内容</p>
first-letter 元素的首字母或第一个字
p:first-letter{color：blue;}
before 用于在某个元素之前插入内容
<style>
li:before{
content: "--";
}
</style>
<ul>
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
</ul>
after 用于在某个元素之后插入内容
3.选择器root not empty target
<style>
（如果body也给了背景颜色，root存在的情况下，body只给页面的内容背景颜色，
如果root不存在，body就给整个页面背景颜色。）
:root{
/*root元素代表的是整个根元素，整个html*/
}
</style>
not 用来排除某个元素下的子元素不使用某个样式
<style>
div *:not(h1){
color:green;
}
</style>
<div>
<h2>有颜色</h2>
<h1>没颜色</h1>
<p>这是一个p标签</p>
</div>
empty 使用empty选择器来指定内容为空白时使用的样式
<style>
:empty{
}
</style>
<table border="1">
<tr>
<td>内容1</td>
<td>内容2</td>
</tr>
<tr>
<td>内容1</td>
<td></td>
</tr>
</table>
target 选择器，对页面中某个target元素指定样式，
该样式只在用户点击超链接，并跳转到target元素后起作用，
<a href="#a1">菜单1</a>
<a href="#a2">菜单2</a>
<a href="#a3">菜单3</a>
<a href="#a4">菜单4</a>
<div id="a1">
<h1>菜单1</h1>
<p>菜单1内容</p>
</div>
<div id="a2">
<h1>菜单2</h1>
<p>菜单2内容</p>
</div>
<div id="a3">
<h1>菜单3</h1>
<p>菜单3内容</p>
</div>
<div id="a4">
<h1>菜单4</h1>
<p>菜单4内容</p>
</div>
4.选择器 first-child , last-child , nth-child 和 nth-last-child
<style>
li:first-child{
}
li:last-child{
background-color:blue;
}
/*nth-child(position)*/
li:nth-child(3){
}
li:nth-last-child(2){
/*从后往前数**/
}
li:nth-last-child(odd){
/*奇数*/
}
li:nth-last-child(evev){
/*偶数*/
background-color:darkgreen;
}
</style>
<ul>
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
<li>列表4</li>
<li>列表5</li>
<li>列表6</li>
</ul>
<!--
nth-child(n)
αn+β
-->
<style>
li:nth-child(4n+1){
}
li:nth-child(4n+2){
background-color:green;
}
li:nth-child(4n+3){
}
li:nth-child(4n+4){
background-color:yellow;
}
</style>
<body>
<ul>
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
<li>列表4</li>
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
<li>列表4</li>
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
<li>列表4</li>
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
<li>列表4</li>
</ul>
</body>
5.选择器 nth-of-type 和 nth-last-of-type
（只针对同类型的子元素进行计算）
<style>
h2:nth-of-type(odd){
}
h2:nth-of-type(even){
background-color:green;
}
</style>
<body>
<h2>文章标题</h2>
<p>文章正文</p>
<h2>文章标题</h2>
<p>文章正文</p>
<h2>文章标题</h2>
<p>文章正文</p>
<h2>文章标题</h2>
<p>文章正文</p>
</body>
nth-last-of-type余nth-of-type正好相反
6.only-child 选择器
可以使用only-child选择器来代替使用nth-child和nth-last-child的实现方法
当只有一个列表项的时候，可以使用only-child代替nth-child(1)
<style>
li:nth-child(1){
}
li:only-child{
background-color:red;
}
</style>
<body>
<ul>
<li>列表1</li>
</ul>
<ul>
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
</ul>
</body>
7.UI元素状态伪类选择器
在css3的选择器中，除了结构性伪类选择器外，还有一种UI元素状态伪类选择器。
这些选择器的共同特征是：指定的样式只有当元素处于某种状态下时才起作用，在默认状态下不起作用。
:hover :active :focus :disabled :read-only :checked
:default :indeterminate ::selection :invalid :valid
:required :optional :in-range
<style>
/*鼠标移入的时候*/
input[type="text"]:hover{
red;
}
/*获取焦点的时候*/
input[type="text"]:focus{
green;
}
/*鼠标按住不放开的时候*/
input[type="text"]:active{
#0D7792;
}
</style>
<input type="text" name="name">
<input type="text" name="age">
<style>
/*选中后*/
input[type="text"]:checked{
outline:2px solid gold;
}
</style>
<input type="checkbox">阅读
<input type="checkbox">旅游
<input type="checkbox">看电影
<input type="checkbox">上网
<style>
input[type="text"]:enabled{
background-color: gold;
}
input[type="text"]:disabled{
background-color: dimgray;
}
</style>
<script>
function radio_change(){
var radio1=document.getElementById("radio1");
var radio2=document.getElementById("radio2");
var text=document.getElementById("text");
if(radio1.checked){
text.disabled="";
}else{
text.value="";
text.disabled="disabled";
}
}
</script>
<input type="radio" id="radio1" name="radio" onchange="radio_change()">可用
<input type="radio" id="radio2" name="radio" onchange="radio_change()">不可用
<input type="text" id="text" disabled>
8.通用兄弟元素选择器
用来指定位于同一个父元素之中的某个元素之后的所有其他某个种类的兄弟元素
<style>
div~p{
}
</style>
<div>
<div>
<p>p元素为div的子元素</p>
<p>p元素为div的子元素</p>
</div>
<p>p元素为div的子元素</p>
<p>p元素为div的子元素</p>
<p>p元素为div的子元素</p>
</div>