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选择文档中的根元素, 总是返回html3

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
:targetURL片段标识符指向的元素3
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值