CSS 选择器

CSS选择器的作用是找出某类元素, 一遍我们使用style元素或者外部样式表对这类元素设置样式

CSS 基本选择器

1. 选择所有元素
   所有元素选择器适合用于设置全局样式, 比如文字样式等;

   • 选择器: *
   • 匹配: 所有元素
   • 支持版本: 2

2. 根据类型选择元素

   • 选择器: <元素类型>
   • 匹配: 所有制定类型的元素
   • 支持版本: 1

3. 根据类选择元素

   • 选择器: <类名>(或 *.<类名>), <元素类型>.<类名>
   • 匹配: 属于指定类的元素; 当和元素类型一同使用时, 匹配属于指定类的特定类型的元素
   • 支持版本: 1

4. 根据ID选择元素
   HTML文档中元素id属性的值必须唯一, 这意味着只要使用ID选择器, 查找的必定是单个元素;

   • 选择器: #<id值>, <元素类型>.<id值>
   • 匹配: 具有制定全局属性id值得元素
   • 支持版本: 1

5. 根据属性选择元素
   属性选择器可以匹配具有符合指定条件属性的所有元素;

   • 选择器: [<条件>]或<元素类型[<条件>]
   • 匹配: 具有匹配制定条件的属性的元素(支持的条件类型请看下表)
   • 支持版本: 视条件而异

条件 说明 CSS版本 [attr] 选择定义attr属性的元素,忽略属性值 2 [attr=”val”] 选择定义attr属性的,且属性值为val的元素 2 [attr^=”val”] 选择定义attr属性的,且属性值以字符串val打头的元素 3 [attr$=”val”] 选择定义attr属性的,且属性值以字符串val结尾的元素 3 [attr*=”val”] 选择定义attr属性的,且属性值包含字符串val的元素 3 [attr~=”val”] 选择定义attr属性的,且属性值具有多个值,其中一个为字符串val的元素 2 [attr|=”val”] 选择定义attr属性的,且属性值为连字符分割的多个值,其中第一个为字符串val的元素 2

注: 上表最后一列, 为[attr|="val"]

复合选择器

1. 并集选择器
   创建由逗号分隔的多个选择器可以将样式应用到单个选择器所匹配的所有元素.

   • 选择器: <选择器>,<选择器>,<选择器>
   • 匹配: 单个选择器匹配的所有元素的并集
   • 支持版本: 1

2. 后代选择器
   后代选择器用于选择包含在其他元素中的元素

   • 选择器: <第一个选择器> <第二个选择器>
   • 匹配: 目标元素为匹配第一个选择器的元素的后代, 且匹配第二个选择器
   • 支持版本: 1

3. 选择子元素
   子代选择器跟后代选择器很像, 不过只选择匹配元素中的直接后代
   

   • 选择器: <第一个选择器> > <第二个选择器>
   • 匹配: 目标元素为匹配第一个选择器的元素的直接后代, 且匹配第二个选择器
   • 支持版本: 2
     

   body > * > span, tr > th {} : 首先找到属于body元素任意子元素的子元素的span, 再找到tr元素的子元素th;

4. 选择兄弟元素

   • 选择器: <第一个选择器> + <第二个选择器>
   • 匹配: 目标元素紧跟匹配第一个选择器的元素, 且匹配第二个选择器
   • 支持版本: 2

5. 普通兄弟选择器
   普通兄弟选择器选择范围会稍微宽松一些, 它匹配的元素在指定元素之后, 但不一定相邻.

   • 选择器: <第一个选择器> ~ <第二个选择器>
   • 匹配: 目标元素位于匹配第一个选择器的元素之后, 切匹配第二个选择器
   • 支持版本: 3

伪类选择器

1. 使用::first-line选择器

   • 选择器: ::first-line
   • 匹配: 文本内容的首行
   • 支持版本: 1

2. 使用::first-letter选择器

   • 选择器: ::first-letter
   • 匹配: 文本内容的首字母
   • 支持版本: 1

3. 使用:before和:after选择器

选择器 说明 CSS版本 :before 在选中元素的内容之前插入内容 2 :after 在选中元素的内容之后插入内容 2

结构性伪类选择器

结构性伪类选择器能够根据元素在文档中的位置选择元素. 这类选择器都有一个冒号字符前缀(:), 例如:empty. 他们可以单独使用, 也可以跟其他选择器组合使用, 例如p:empty.

1. 根元素选择器

选择器 说明 CSS版本 :root 选择文档中的根元素, 总是返回html 3

2. 子元素选择器

选择器 说明 CSS版本 :first-child 选择元素的第一个子元素 2 :last-child 选择元素的最后一个子元素 3 :only-child 选择元素的唯一子元素 3 :only-of-type 选择元素指定类型的唯一子元素 3

3. 使用:nth-child选择器

选择器 说明 CSS版本 :nth-child(n) 选择父元素的第n个子元素 3 :nth-last-child(n) 选择父元素的倒数第n个子元素 3 :nth-of-type(n) 选择父元素定义类型的第n个子元素 3 :nth-last-of-type(n) 选择父元素定义类型的倒数第n个子元素 3

使用UI伪类选择器

选择器 说明 CSS版本 :enabled 选择启用状态的元素 3 :disabled 选择禁用状态的元素 3 :checked 选择被选中的input元素(只用于单选按钮和复选框) 3 :default 选择默认元素 3 :valid, :invalid 根据输入验证选择有效或者无效的input元素 3 :in-range, :out-of-range 选择在指定范围之内或者之外受限的input元素 3 :required, :optional 根据是否允许:required属性选择input元素 3

动态伪类选择器

选择器 说明 CSS版本 :link 选择链接元素 1 :visited 选择用户已访问的链接元素 1 :hover 鼠标悬停在其上的元素 2 :active 当前被用户激活的元素,通常意味着用户即将点击(或按压)该元素 2 :focus 当前获得焦点的元素 2

其他伪类选择器

选择器 说明 CSS版本 :not(<选择器>) 对括号内选择器的选择取反 3 :lang(<目标语言>) 选择基于lang全局属性值得元素 1 :target URL片段标识符指向的元素 3