css 选择器

大纲

  • 元素选择器

    名称 语法格式 作用解释
    通配符选择器 * 选择所有元素
    标签选择器(类型选择器) tagName 选择某一类标签
    class 选择器(类选择器) .className 选择含有对应class名的标签
    id 选择器 #idName 选择 id匹配的所有元素
  • 关系选择器

    名称 语法格式 作用解释
    后代选择器(包含选择器) A B(空格) 选择A后代中所有的B,不论其是否是A的子代或是孙代等
    子代选择器 A>B 选择A子代中的B,若是孙代等不予选择
    兄弟选择器 “~” A~B, 选择与A同父且出现在A后面的所有B元素
    相邻选择器 “+” A~B, 选择与A同父且紧随在A后的B元
  • 属性选择器

    名称 语法格式 作用解释
    E[att] 选择具有att属性的E元素
    E[att=”val”] 选择具有att属性且属性值等于val的E元素
    E[att~=”val”] 选择具有att属性且属性值为一用空格分隔的字词列表,其中一个等于val的E元素(包含只有一个值且该值等于val的情况)
    E[att^=”val”] 选择具有att属性且属性值为以val开头的字符串的E元素
    E[att$=”val”] 选择具有att属性且属性值为以val结尾的字符串的E元素
    E[att*=”val”] 选择具有att属性且属性值为包含val的字符串的E元素
    E[att|=”val”] 选择具有att属性,其值是以val开头并用连接符”-“分隔的字符串的E元素;如果值仅为val,也将被选择
  • 伪类选择器

    选择器 描述
    :active 在用户激活(例如点击)元素的时候匹配。
    :any-link 匹配一个链接的:link和:visited状态。
    :blank 匹配空输入值的元素。
    :checked 匹配处于选中状态的单选或者复选框。
    :current (en-US) 匹配正在展示的元素,或者其上级元素。
    :default 匹配一组相似的元素中默认的一个或者更多的 UI 元素。
    :dir 基于其方向性(HTMLdir属性或者 CSSdirection属性的值)匹配一个元素。
    :disabled 匹配处于关闭状态的用户界面元素
    :empty 匹配除了可能存在的空格外,没有子元素的元素。
    :enabled 匹配处于开启状态的用户界面元素。
    :first 匹配分页媒体的第一页。
    :first-child 匹配兄弟元素中的第一个元素。
    :first-of-type 匹配兄弟元素中第一个某种类型的元素。
    :focus 当一个元素有焦点的时候匹配。
    :focus-visible 当元素有焦点,且焦点对用户可见的时候匹配。
    :focus-within 匹配有焦点的元素,以及子代元素有焦点的元素。
    :future (en-US) 匹配当前元素之后的元素。
    :hover 当用户悬浮到一个元素之上的时候匹配。
    :indeterminate 匹配未定态值的 UI 元素,通常为复选框。
    :in-range 用一个区间匹配元素,当值处于区间之内时匹配。
    :invalid 匹配诸如的位于不可用状态的元素。
    :lang 基于语言(HTMLlang属性的值)匹配元素。
    :last-child 匹配兄弟元素中最末的那个元素。
    :last-of-type 匹配兄弟元素中最后一个某种类型的元素。
    :left 在分页媒体中,匹配左手边的页。
    :link 匹配未曾访问的链接。
    :local-link (en-US) 匹配指向和当前文档同一网站页面的链接。
    :is() 匹配传入的选择器列表中的任何选择器。
    :not 匹配作为值传入自身的选择器未匹配的物件。
    :nth-child 匹配一列兄弟元素中的元素——兄弟元素按照an+b形式的式子进行匹配(比如 2n+1 匹配元素 1、3、5、7 等。即所有的奇数个)。
    :nth-of-type 匹配某种类型的一列兄弟元素(比如,

    元素)——兄弟元素按照an+b形式的式子进行匹配(比如 2n+1 匹配元素 1、3、5、7 等。即所有的奇数个)。

    :nth-last-child 匹配一列兄弟元素,从后往前倒数。兄弟元素按照an+b形式的式子进行匹配(比如 2n+1 匹配按照顺序来的最后一个元素,然后往前两个,再往前两个,诸如此类。从后往前数的所有奇数个)。
    :nth-last-of-type 匹配某种类型的一列兄弟元素(比如,

    元素),从后往前倒数。兄弟元素按照an+b形式的式子进行匹配(比如 2n+1 匹配按照顺序来的最后一个元素,然后往前两个,再往前两个,诸如此类。从后往前数的所有奇数个)。

    :only-child 匹配没有兄弟元素的元素。
    :only-of-type 匹配兄弟元素中某类型仅有的元素。
    :optional 匹配不是必填的 form 元素。
    :out-of-range 按区间匹配元素,当值不在区间内的的时候匹配。
    :past (en-US) 匹配当前元素之前的元素。
    :placeholder-shown 匹配显示占位文字的 input 元素。
    :playing 匹配代表音频、视频或者相似的能“播放”或者“暂停”的资源的,且正在“播放”的元素。
    :paused 匹配代表音频、视频或者相似的能“播放”或者“暂停”的资源的,且正在“暂停”的元素。
    :read-only 匹配用户不可更改的元素。
    :read-write 匹配用户可更改的元素。
    :required 匹配必填的 form 元素。
    :right 在分页媒体中,匹配右手边的页。
    :root 匹配文档的根元素。
    :scope 匹配任何为参考点元素的的元素。
    :valid 匹配诸如元素的处于可用状态的元素。
    :target 匹配当前 URL 目标的元素(例如如果它有一个匹配当前URL 分段的元素)。
    :visited 匹配已访问链接。

选择器的竞争规则

  1. 层叠规则: 相同选择器后面的会覆盖前面的
  2. 优先级规则: 优先级高的选择器内容显示