HTML选择器

选择器

1.组合选择器、并集选择器
p,div,span（逗号分开，三个元素都能被选中）
组合选择器比较特殊性时要分开计算
2.层次选择器：
子级选择器：父元素+“>”+子元素{声明块}
后代选择器：父元素+空格+子元素{声明块}
兄弟选择器：都只能选中当前元素后面的兄弟元素。
相邻兄弟：兄弟元素A+“+”+兄弟元素B{声明块}（选中A后面相邻的兄弟元素B，中间不能有任何标签）
通用选择器：不相邻兄弟，兄弟元素A+“~”+兄弟元素B{声明块}
3.伪类选择器：
结构伪类选择器：p:nth-child(位置){声明块}（选中第n个元素，如果不是p元素就不能选中）。适用场景：所有兄弟元素标签名都相同。
p:nth-of-type(n){声明块}（选中同种类型的第n个元素）,n从0开始加一。
选中最后一个元素,元素名：last-child；倒数第几个：nth-last-child(n)；第一个：first-child
选中偶数：nth-child（2n/even）；奇数：nth-child（2n-1/odd）；
选中第三个结束前的所有元素：nth-child(-n+3)；选中第三个开始的所有元素：nth-child(n+3)。
否定伪类选择器：:not（否定的元素位置）例子：p:not(:nth-child(3) ) 除了第三个p其他p元素都选中。
同时否定多个元素时：:not（否定的元素位置1）:not（否定的元素位置2）
选中内容添加样式：::selection 目前只支持字体颜色和背景色。
动态伪类选择器：
状态1：未访问 link
状态2：悬停 hover
状态3：点击时 active
状态4：已访问 visited
书写顺序1：🔗visited:hover:active
书写顺序2：:visited🔗hover:active
link和visited只适用于a标签
[扩展] focus获取焦点（键盘tab选中超链接）
当a标签被激活时，即获取到焦点框。（键盘tab键）
4.伪元素选择器：
::before是元素a的第一个子元素
::after是元素a的最后一个子元素
元素和伪元素是父子级关系
元素A的第一行 ::first-line
元素A的第一个汉字 ::first-letter
[属性选择器] 书写格式：元素名[name=“属性值”]
元素名[name^=”属性值开头部分”]
元素名[name$=”属性值结尾部分”]