css选择器
一、基础选择器
1、标签选择器
标签选择器：标签名是什么就直接写什么，其他任何符号都不要书写。
标签选择器可以选中页面上所有的同种标签。嵌套的再深的标签也能被选中。
用途：一般用于清除默认样式或者重置默认样式。
2、id选择器
id选择器是通过标签的id属性进行设置。
写法：#id属性值。（#和属性值之间不能有空格）。
id选择器只能选中具有该id名的标签或者元素。
id名的命名规则：
必须以字母开头（严格区分大小写），后面可以有数字、下划线、短横。
id名只能出现一次，即使是不同标签也不能使用相同的id名。
id选择器只能选中一个标签或者一个html元素，因为id名是唯一的。
css层叠性体现1：同一个元素可以被不同选择器选中设置不同的样式属性，这些样式属性都可以加载。
3、类选择器
类选择器是通过元素的class属性选中具有同种类名的所有元素。
写法：.class属性值（.后面紧跟属性值，不要有空格）。
class属性值的命名规则和id是一样的。
类选择器的特殊应用：原子类（公共类），我们通常会设置很多原子类，元素有什么样式直接书写该原子类的类名。原子类的属性只书写一个，便于查找。
一个元素可以有多个类名，类名之间用空格隔开。
实际工作中使用类选择器较多，可以直接给想要的一些元素统一设置相同的属性。
id上行为，class上样式。
4、通配符
*，可以选中页面上所有的元素，包括body。
通配符的用途：快速清除默认样式。
实际工作中不会使用通配符来清除默认样式。
例：
*{
margin: 0;
padding: 0;
}
二、高级选择器
高级选择器就是在基础选择器上进行延伸。
1、后代选择器
通过有嵌套关系的标签进行选择，通过标签或者类选择器确定一个大的范围，在大范围再次进行选择，可以多次选择。
写法：通过空格隔开每一层。
后代选择器不仅可以选中儿子，还可以选中孙子、曾孙子等。只要是后代都可以被选中。不管怎么选择，都必须有对应的html结构。
例：
还可以把祖先补全书写，可以精确每一层选择。例：
div p span{
font-size: 36px;
}
2、交集选择器
交集选择器写法：直接连续书写选择器，之间不要有任何空格。交集选择器可以连续交集。
例：既是p标签，又有.para类和.fs类。
我是一些段落标签
p.para.fs{
color:yellow;
}
.box.para{} //连续类名选择器也是合法的
#box.para{} //不合法，因为id是唯一的，可以直接被选中。
一定要区分交集选择器和后代选择器。
3、并集选择器
可以同时选中多个元素，用逗号隔开每一个选择器。
例：
p,h3,li{
color:red;
}
也可以选中类名的选择器：.box,.ps,.fs{};
只要看到选择器中有逗号的都是并集选择器。
css3新增的选择器
1、属性选择器
属性选择器：通过属性值、属性名进行选中
①通过属性值进行选中
例：
<img src="images/0.jpg" alt="">
img[src="images/0.jpg"]{
border: 1px solid #000;
}
②开头匹配：^=
例：
a[href ^="page."]{
color:red;
}
③结尾匹配$=
例：
a[href $="1.html"]{
color:red;
}
④任意匹配*=
例：
a[href *="page"]{
color: red;
}
⑤分组匹配~=
属性值是独立的成分（比如属性值之间以空格隔开，那么被隔开的每一个都是独立的）
自定义属性：data-开头，例：
选中的是box是一个独立成分的元素。
例：
div[data-xixi ~="box"]{
color:red;
}
⑥短横匹配 |=
例
div[data-xixi |="box"]{
color:red;
}
以box开头的元素会被选中，如果还有其他元素必须以“-”连接。
⑦有属性
例：
img[alt]{
border: 1px solid #000;
}
加深理解：
①属性选择器一般是以标签开头，但是不写标签也合法。
例：
[alt]{
border-color:red;
}
②可以连续交集
例：
img[src $= "2.jpg"][alt]{
border-color:red;
}
2、儿子序选择器
①p:first-child：p是某个元素的第一个儿子
②p:last-child：p是某个元素的最后一个儿子。
③p:nth-child(n):p是某个元素的第n个儿子,序号是从1开始
④p:nth-child(an + b)选中连续多个，从b开始，每a个选中一次。
例：从第4行开始，每隔3行选中。4,7,10,13,16……
tr:nth-child(3n+4){
background: orange;
}
⑤奇数：nth-child(2n+1)
⑥偶数：nth-child(2n)
⑦p:nth-last-child(n)倒数第几个儿子。
3、儿子类型序选择器
①h3:first-of-type{}选中的h3是某个元素的第一个h3儿子
②h3:last-of-type最后一个h3儿子
③h3:nth-of-type(n)序号是从1开始
④h3:nth-of-type(2n+3)任意多个
⑤h3:nth-last-of-type(n)倒数第n个h3标签的儿子。
（注：红色是答案）
4、关系节点选择器
后代选择器
①儿子选择器：>
儿子选择器只能选中某个元素的子代，不能选中它的孙子或者曾孙子等其他后代元素。
div.box>p{
color:red;
}
②后面第一个亲兄弟 +
h3+p{
color:red;
}
③后面所有的亲兄弟 ~
h3~p{
color:red;
}
