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

标签：target   checked   enabled   

一、兄弟选择器

相邻兄弟选择器

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

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

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

通用兄弟选择器

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

      - 使用符号(~)作为结合符，即 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复杂选择器（兄弟选择器 、属性选择器、伪类选择器、伪元素选择器）

本文出自 “技术交流” 博客，谢绝转载！

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

标签：target   checked   enabled   

原文地址：http://jasonteach.blog.51cto.com/5192112/1754230