Css3之高级-1 Css复杂选择器（兄弟选择器 、属性选择器、伪类选择器、伪元素选择器）

一、兄弟选择器

相邻兄弟选择器 - 相邻兄弟选择器匹配指定元素的相邻兄弟元素 - 如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器 - 使用加号(+)作为结合符


通用兄弟选择器 - 通用兄弟选择器匹配某元素后面的所有兄弟元素 - 使用符号(~)作为结合符，即 element1~element2 - 两种元素必须拥有相同的父元素，但是element2不必直接紧随element1


二、属性选择器

属性选择器
- 属性选择器能够将元素附带的属性用于选择器中，从而对带有指定属性的元素设置样式








三、伪类选择器

目标伪类
- :target,突出显示活动的 HTML 锚，用于选取当前活动的目标元素 - 语法为 E:target - 选择匹配E的所有元素，且匹配元素被 URL 指向



元素状态伪类
- :enabled,匹配每个已启用的元素(大多用在表单元素上) - :disabled,匹配每个被禁用的元素(大多用在表单元素上) - :checked,匹配每个已被选择中的input元素(只用于单选按钮和复选框)



结构伪类 - :first-child , 匹配属于其父元素的首个子元素 - :last-child , 匹配属于其父元素的最后一个子元素 - :empty , 匹配没有子元素(包括文本节点)的每个元素 - :only-child , 匹配属于其父元素的唯一子元素 - 示例 - p:first-child -> 选择属于父元素的第一个子元素的每个<p>元素 - p:last-child -> 选择属于父元素的最后一个子元素的每个<p>元素 - p:empty -> 选择没有子元素的每个<p>元素 - p:only-child -> 选择属于其父元素的唯一子元素的每个<p>元素



否定伪类 - :not(selector),匹配非指定元素/选择器的每个元素



四、伪元素选择器

伪元素:first-letter - :first-letter 选择器用于选取指定选择器的首字母 - 常用于排版细节，如首字母突出显示、下沉等



伪元素:first-line - :first-line 选择器用于选取指定选择器的首行



伪元素 ::selection - ::selection 选择器匹配被用户选取的部分



总结：本章内容主要介绍了 Css复杂选择器（兄弟选择器 、属性选择器、伪类选择器、伪元素选择器）