持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第24天，点击查看活动详情
- CSS3新增的选择器
-
子级选择器：用于选取带有特定父元素的元素
-
书写语法：element1>element2
-
注意：如果element2元素不是父元素element1的直接子元素，则不会被选择
-
‘>’符号之前书写父级选择器，>符号之后写子级选择器，必须满足父子级关系才能选中标签（后代选择器，空格符号会选择所有子级元素，包括跨级的）
-
-
兄弟选择器
- element1+element2相邻兄弟选择器：匹配同一个父元素中紧跟在element1后面的一个element2元素。注意：选中的是紧跟在E1之后的同级元素E2；只能选中紧跟在后面的一个E2元素；二者有相同的父级；+符号前后可以添加空格书写。
- element1~element2其他兄弟选择器：匹配同一个父元素中在element1后面的所有element2元素。注意：选择element1之后出现的所有element2；两种元素必须拥有相同的父元素，但是element2不必直接紧随element1；~符号前后可以添加空格书写
-
- 结构伪类选择器
-
上图中的错误个人理解E应该是父元素，不是子元素。正解是E确实是子元素，完整书写为div p:first-child（div中的第一个子元素p，如果不是p则该条无效，不会选中任何元素），所以叫伪类
-
第三个nth-child(n)：在应用书写的时候，需要把child后面的n换成数字。n可以是数字、关键字和公式。n如果是数字，就是选择第n个；如果是关键字，常见的是even偶数和odd奇数（所有偶数个数的子元素或者奇数个数的子元素）；如果是公式，常见的公式（如果n是公式，则从0开始计算，n是从0，1，2，3……一直递增）；但是第0元素或者超出了元素的个数会被忽略
-
E:nth-child(n)和E:nth-of-type(n)的区别：
-
- E:nth-child(n) 匹配父元素的第n个子元素E，同时需要满足两个条件
- E:nth-of-type(n)匹配同类型中的第n个同级兄弟元素E，会忽视其他同级的非同类型元素
-
伪元素选择器
-
h5写法和传统写法区别：
- 单冒号E:before
- 双冒号E::before
浏览器对以上写法都能识别，双冒号是h5的语法规范
-
-
伪元素的注意事项：
-
伪元素只能给双标签添加，不能给单标签添加
-
伪元素的冒号前不能有空格，如E ::before 这个写法是错误的
-
伪元素里面必须写上属性content:””;
-
before和after创建的元素是行内元素（设置长宽需转换成block）
-
为什么要叫做伪元素？因为在DOM里面看不到刚才创建的元素，所以叫做伪元素
-
属性选择器
- 属性选择器用来选择包含指定属性的标签
- 属性选择器用来选择包含指定属性的标签
-
-
选择器权重
-
基础选择器：id选择器>类选择器>标签选择器>*
-
伪类选择器、属性选择器的权重等于类选择器
-
伪元素选择器的权重等于标签选择器
-
