一、兄弟选择器


相邻兄弟选择器

  - 相邻兄弟选择器匹配指定元素的相邻兄弟元素

      - 如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器

      - 使用加号(+)作为结合符

wKiom1bx-hbx6cOUAAET9U_wJjU354.png


通用兄弟选择器

  - 通用兄弟选择器匹配某元素后面的所有兄弟元素

      - 使用符号(~)作为结合符，即 element1~element2

      - 两种元素必须拥有相同的父元素，但是element2不必直接紧随element1

wKioL1bx_CrAvEJ5AAEO8MKOQmw202.png


二、属性选择器


属性选择器

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

wKioL1bx_RWS38fyAAEnPZhbCc8663.png

wKiom1bx_NPSXLLNAAKMQTxxsH8655.png

wKioL1bx_jLDmEaxAAF0Xj8N35c365.png


三、伪类选择器


目标伪类

  - :target,突出显示活动的 HTML 锚，用于选取当前活动的目标元素

  - 语法为 E:target

      - 选择匹配E的所有元素，且匹配元素被 URL 指向

wKiom1bx_nrwAKUcAALYIpqOSME177.png


元素状态伪类

  - :enabled,匹配每个已启用的元素(大多用在表单元素上)

  - :disabled,匹配每个被禁用的元素(大多用在表单元素上)

  - :checked,匹配每个已被选择中的input元素(只用于单选按钮和复选框)

wKioL1byBSOh3kQWAAMs4g4f1zU038.png


结构伪类

  - :first-child , 匹配属于其父元素的首个子元素

  - :last-child  , 匹配属于其父元素的最后一个子元素

  - :empty , 匹配没有子元素(包括文本节点)的每个元素

  - :only-child , 匹配属于其父元素的唯一子元素

  - 示例

      - p:first-child -> 选择属于父元素的第一个子元素的每个<p>元素

      - p:last-child  -> 选择属于父元素的最后一个子元素的每个<p>元素

      - p:empty       -> 选择没有子元素的每个<p>元素

      - p:only-child  -> 选择属于其父元素的唯一子元素的每个<p>元素

wKiom1byCqehxRrpAAFjFhvBPZM814.png


否定伪类

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

wKioL1byC6SiEDymAACoPHZrVrc869.png


四、伪元素选择器


伪元素:first-letter

  - :first-letter 选择器用于选取指定选择器的首字母

      - 常用于排版细节，如首字母突出显示、下沉等

wKiom1byC32ysFjHAACGOSu3dec073.png


伪元素:first-line

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

wKioL1byEMixkPLxAAEIWl_A1n0783.png


伪元素 ::selection

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

 wKioL1byEdGRb84GAAEbihOOEA0431.png


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