常见CSS选择器
1 基本选择器
-
通配选择器 以*****定义
*{} 选择文档中所有的html元素 -
id选择器 以#定义
#div{} 选择指定ID属性值为"id"的html元素 -
类选择器
.c1{} 选择指定class属性值为"class"的任意多个html元素 -
元素选择器
ul{} 选择指定类型的的html元素
2组合选择器
-
多元素选择器 用逗号分隔
E,F{} 同时匹配E元素，F元素 -
后代选择器 用空格分隔
E F{} 匹配E元素所有的后代F元素 -
子元素选择器 用>分隔
E>F{} 匹配E元素的所有直接子元素F -
直接相邻选择器 用+分隔
E+F{} 匹配E元素后的相邻的同级元素F -
普通相邻选择器 用~分隔
E~F{} 匹配E元素后的所有同级元素F，无论相邻与否
3 伪类选择器
-
结构伪类选择器
E:first-child 匹配E元素的第一个子元素
E:last-child 匹配E元素的最后一个子元素
E:nth-child(n) 匹配E元素的第n个子元素
E:nth-last-child(n) 匹配E元素的倒数第n个子元素
E:nth-of-type(n) 匹配父元素内具有指定类型的第n个E元素
E:nth-last-of-type(n) 匹配父元素内具有指定类型的倒数第n个E元素
E:first-of-type 匹配父元素内具有指定类型的第一个E元素
E:last-of-type 匹配父元素内具有指定类型的最后一个E元素
E:only-child 匹配父元素内只包含一个子元素，且该子元素匹配E元素
E:only--ofchild 匹配父元素内只包含一个同类型的子元素，且该子元素匹配E元素
E:empty 匹配没有子元素的元素
E:root 匹配E元素所在文档的根元素
动态伪类选择器
E:link 匹配未被访问过的超链接
E:focus 匹配获得焦点的E元素
E:hover 匹配鼠标停留其上的E元素
E:active 匹配鼠标已经其上按下、还没有释放的E元素
E:visited 匹配被访问过的超链接
E:checked 匹配被勾选中的radio或checkbox语言伪类选择器
E:lang( ) 匹配指定了lang属性且值为( )的E元素
选择器的优先级
从高到低排序：
1 在属性后面使用 !important
2 作为style属性写在元素标签上的内联样式
3 id选择器
4 类选择器
5 伪类选择器
6 属性选择器
7 标签选择器
8 通配符选择器
9 浏览器自定义选择器
class 和 id 的使用场景
id具有唯一性，所以用在页面上只出现一次的地方
class具有普遍性，所以用在页面上多次出现的地方
使用CSS选择器要划定适当的命名空间
- 使代码语义化，提高可读性
- 规范代码，便于多人协作
- 提高兼容性，浏览器可能会因为不适当的命名出错
选择器的使用实例
#header{} id=header的元素
.header{} class=header的元素
.header .logo{} 父元素header里的子元素logo
.header.mobile{} header元素和mobile元素
.header p, .header h3{} 父元素header里的子元素p和父元素header里的子元素h3
#header .nav>li{} id=header的父元素里的class=nav的子元素的后代li元素
#header a:hover{} id=header的父元素里的class=a的子元素的伪类
伪类选择器
E:first-child
E:last-child
E:nth-child(n)
E:nth-last-child(n)
E:nth-of-type(n)
E:nth-last-of-type(n)
E:first-of-type
E:last-of-type
E:only-child
E:only--ofchild
E:empty
E:root
E:link
E:visited
E:active
E:hover
E:focus
E:lang
:first-child和:first-of-type的作用和区别
:first-child：父元素内的第一个子元素（年级第一）
:first-of-type：父元素内具有指定类型的第一个子元素（班级第一）
<div class="footer">
<p>第一个子元素</p>
<h3>第二个子元素</h3>
<h1>第三个子元素</h1>
<h1>第四个子元素</h1>
</div>
p:first-child匹配到第一个元素 h3:first-child h1:first-child匹配不到任何元素，因为只有p是第一个，其他都是无效的
h1:first-of-type匹配到第三个子元素，因为它是第一个h1元素
代码实例
<style>
.item1:first-child{
color: red;
}
.item1:first-of-type{
background: blue;
}
</style>
<div class="ct">
<p class="item1">aa</p>
<h3 class="item1">bb</h3>
<h3 class="item1">ccc</h3>
</div>
.item1:first-child匹配到item1的第一个元素拍，所以aa是红色
.item1:first-of-type匹配到item每类的第一个元素即p和第一个h3，所以aa和bb背景色是蓝
text-align: center
text-align 属性规定元素中的文本的水平对齐方式。
text-align: center作用在块级元素上，使块级元素内的行内元素水平居中。
