class选择器
写法： .name
class选择器：类（别）选择器，选择拥有该类别的多个元素
注：
1.class选择器是可以复用的。
<div class="box "></div>
<div class="box"></div>
2.可以添加多个class样式。
<div class="box box2"></div>
3.多个样式的时候，样式的优先级根据CSS决定，而不是class属性中的顺序。
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.box2{
background-color: #008000;
}
.box{ /*取最后的作为样式的取值*/
background-color: #0000FF;
}
</style>
</head>
<body>
<div class="box box2"></div>
</body>
</html>
4.标签+类的写法
.box span{}
.box,p
标签选择器
根据标签名称选择对应的所有标签
写法：div{}、span{}…
使用场景：
1.去掉某些标签的默认样式时
2.复杂的选择器中，如层次选择器
层次选择器
后代选择器
写法：M N
概念：在指定条件下，找到所有的指定的集合
父子选择器
写法：M > N
概念：与后代选择器的区别在于，后代选择器选的范围包括标签里的标签，也就是子孙。而父子选择器只包括第一层标签，也就是子标签
可以看到下图的hello并没有出现边框，因此父子选择器只影响到子代
兄弟选择器
写法：M~N
概念：当前M以下的所有指定兄弟类型，之前不会被影响
位于段落2前面的段落3并没有受到影响，因此兄弟选择器，只是会影响到后面所有（在指定条件下）的指定元素
相邻选择器
写法：M+N
概念：同辈之间的选择，只会找自己后挨着的，跨一个不行，之前也不行。这就是与兄弟选择器的区别，兄弟选择器只有在容器内，并且在当前元素以下的，都会被选择到，就算跨行也没关系
组合（群组）选择器
写法：.a,.b,.c
概念：通过逗号的方式，给多个不同的选择器添加统一的CSS样式，来达到代码的复用
属性选择器
写法：
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div[class]{ /* 属性是class*/
color:blue ;
}
div[class=box]{ /* class属性值=box*/
border: 1px solid black;
width: 6.25rem;
}
div[class*=box]{ /* class属性值包含box*/
font-weight: bolder;
}
div[id^=all]{ /* 以all开头的*/
font-size: 50px;
}
div[id$=all]{ /* 以all结尾的*/
text-indent: 32px;
}
div[id=all][class=box]{ /* 组合选择器*/
background-color: #FF0000;
}
</style>
</head>
<body>
<div>div</div>
<div class="box" >box</div>
<div class="box" id="all">box</div>
<div class="box2 " id="all-live" >box2</div>
<div class="hh-box3 " id="liveall" >box3</div>
</body>
伪类选择器
概念：css伪类用于向某些元素添加特殊的效果。一般用于初始样式添加不上的时候，用伪类来添加
写法：M：{}
:link 访问前的样式 （只能添加给a标签）
:visited 访问后的样式 （只能添加给a标签）
:hover 鼠标移入前的样式 （所有标签）
:active 鼠标按下时的样式 （所有标签）
当四个同时作用在一个元素上时，排序顺序是：:link :visited :hover :active （简记LVHA ）
（1） link必须在hover、active之前，顺序打乱的话，link的样式是不会被识别的,因为link属于初始化样式，那么当你移入的时候，如果初始化样式在你的移入的后面，那么一下就被初始化的覆盖了，点击的时候也是如此，所以要保证，link要在hover、active之前。可以简单的说，link的优先级大于hover和active
（2）active要在hover之后，否则，active样式不被识别。因为当你点击时候，此时是先移入后点击，如果点击在移入之前的话，那么点击的样式就会被覆盖了。hover的优先级大于link
(3)visited没有什么要求放哪都行，但是为了对比link和active、hover的差距，visited处于中间作为区分。
**注意：**浏览过的数据会保存，无法通过刷新回到初始的样子，只能通过清除浏览器历史数据，或者更改访问地址进行调试。还有就是一般网站只设置a{},a:hover{}
:after 元素内部的末尾，使用content属性
:before 元素内部的前面
:after和:before经常用来处理浮动带来的父元素高度塌陷的问题
:cheacked 当表单被选择时添加样式，或者手动添加默认被选择的属性（针对表单元素）
:disable 当表单添加disable属性时添加样式（针对表单元素）
:focus 输入框获取焦点时，添加样式
input:checked{ /* 当表单被选择时添加样式，或者手动添加默认被选择的属性*/
width: 100px;
height: 100px;
}
input:disabled{ /* 当表单添加disable属性时添加样式*/
width: 100px;
height: 50px;
}
input:focus{ /* 输入框获取焦点时，添加样式 */
background-color: aqua;
}
//注意：直接使用伪类名也可以实现 它其实也相当于一个类了
/*:checked{ /* 当表单被选择时添加样式，或者手动添加默认被选择的属性
width: 100px;
height: 100px;
}
:disabled{ /* 当表单添加disable属性时添加样式
width: 100px;
height: 50px;
}
:focus{ /* 输入框获取焦点时，添加样式
background-color: aqua;
}
<form action="" method="">
<input type="checkbox" name="" id="" value="" />
<input type="checkbox" name="" id="" value="" disabled=""/>
<input type="checkbox" name="" id="" value="" />
<input type="text" name="" id="" value="" />
</form>
结构伪类选择器
:nth-of-type() 角标从1开始，1表示第一项 | n值：代表0到无穷大|odd（奇数项）|even（偶数项）。n表示全选，2n+1表示选择奇数，2n表示选择偶数。
加粗样式:first-of-type：第一项
**:last-of-type：**最后一项
:only-of-type：当项数唯一才有效果
:nth-child() ：角标从1开始，1表示第一项 | n值：代表0到无穷大|odd（奇数项）|even（偶数项）。n表示全选，2n+1表示选择奇数，2n表示选择偶数，不管是奇数还是偶数，都是隔一个选中
:nth-child()：使用方式大部分与nth-of-type类似，有一些小区别在下文也提到了
:last-child：
:fist-child:
:only-chid：
nth-child和nth-of-type区别在于：type表示类型，child表示子类。如果选择的孩子不是和自己类型一样的，那么就没有任何效果，但是type则不同，只要是项，就能被选到
nth-of-type:
nth-child：
如果先要选中的元素之间增加隔离的2、3、4…个的话，可以通过改变n前面的值比如隔两个3n+1，从第一个开始每次选中元素中间隔两个。4n+1也是一样隔三个，依此类推。
794
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
