css选择器

林晨熙
1,999 阅读5分钟

css选择器用法较多，不常用的选择器容易遗忘，于是在这里整理出css选择器的基本用法，以备查用。

基本选择器

  • *: 通配符，匹配任何元素

    例：* { color: red }

  • #id: id 选择器

    例：匹配所有 id 属性为 app 的元素

    #app { color: red }

  • .class: class 选择器

    匹配所有 class 属性为 btn 的元素

    例：.btn { color: red }

  • element: 元素选择器

    匹配所有 div 标签

    例：div { color: red }

属性选择器

HTML:

  <div title="myBtn Button" lang="en-us" />

CSS 2.1

  • [attribute]: 匹配所有带有 attribute 属性的元素

    [title] { color: red; }

  • [attribute="x"]: 匹配所有 attribute 属性为 x 的元素

    [title=myBtn] { color: red; }

  • [attribute~="x"]: 匹配所有 attribute 属性具有多个空格分隔的值，其中一个值等于 x 的元素

    [title~="Button"] { color: red; }

  • [attribute|="x"]: 匹配所有 attribute 属性具有连字符-分隔的值，其中一个值以 x 开头的元素

    [lang|="en"] { color: red; }

CSS 3

  • [attribute^="x"]: 匹配属性 attribute 的值以 x 开头的元素

    [title^=my] { color: red; }

  • [attribute$="x"]: 匹配属性 attribute 的值以 x 结尾的元素

    [title$=Button] { color: red; }

  • [attribute*="x"]: 匹配属性 attribute 的值包含 x 的元素

    [title*=Btn] { color: red; }

伪类选择器

HTML：

<div>
  <a lang="en" href="http://xinghunm.com" target="_blank">Xinghunm.com</a>
</div>

CSS 2.1

以下的 E、F 指 selector 匹配到的元素，其本身就是 selector。

  • E:first-child: 匹配元素 E 当它是其父元素的第一个子元素

    a:first-child { color: red; }

  • E:link: 匹配未被访问(未点击或跳转)的链接

    a:link { color: black; }

  • E:visited: 匹配已访问过的链接

    a:visited { color: green; }

  • E:hover: 匹配鼠标悬停其上的元素

    :hover必须在:link 和:visited 之后才能看到效果。

    a:hover { color: blue; }

  • E:active: 匹配鼠标按下还未抬起的元素

    :active必须在:hover之后才能看到效果。

    a:active { color: red; }

  • E:focus: 匹配获取当前焦点的元素

    a:focus { color: yellow; }

  • E:lang(x): 匹配 lang 属性等于 x 的元素

    a:lang(en) { color: red; }

CSS 3

HTML：

  <div>
      <h1>this is h1</h1>
      <h3>first-of-type h3</h3>
      <h3>last-of-type h3</h3>
      <ul>
          <li><a href="#tab1">tab1</a></li>
          <li><a href="#tab2">tab2</a></li>
      </ul>
      <div id="tab1">this is tab1</div>
      <div id="tab2">this is tab2</div>
      <p><span>only child</span></p>
      <p></p>
      <input id="input1" />
      <input id="input2" disabled="disable" />
      <input id="input3" type="checkbox" />
  </div>

  • E:target: URL 后跟锚点#，指向文档内某个具体的元素，这个被链接的元素就是目标元素，E:target选 择器用于选取当前活动的目标元素 当我们点击列表 tab1 时，因为其锚点链接的元素就是 id 为 tab1 的元素，所以此时活动的目标元素就是 id 为 tab1 的 div，通过 div:target 就可以获取此目标元素。

    div:target { background: red; }

  • :not(selector): 匹配与 selector 选择器描述不相符的元素

    div :not(div) { color: red; }

  • E:enabled: 匹配表单中激活的元素

    #input1:enabled { background: red; }

  • E:disabled: 匹配表单中禁用的元素

    #input2:disabled { background: black; }

  • E:checked: 匹配表单中被选中的 radio(单选框)或 checkbox(复选框)

    #input3:checked { margin: 20px; }

CSS3 结构性伪类

  • :root: 匹配根元素，对应 HTML 文档就是 html 元素

    :root { color: red; }

  • E:nth-child(n): 匹配元素 E 当它是其父元素的第 n(从 1 开始)个子元素 列表 tab1 是其父元素 ul 的第一个元素，因此可以匹配到列表 tab1

    li:nth-child(1) { color: red; }

  • E:nth-last-child(n): 匹配元素 E 当它是其父元素的倒数第 n(从 1 开始)个子元素 列表 tab2 是其父元素 ul 的倒数第一个子元素，因此可以匹配到列表 tab2

    li:nth-last-child(1) { color: red; }

  • E:last-child: 匹配元素 E 当它是其父元素的倒数第 1 个子元素

    li:last-child() { color: red; }

  • E:only-child: 匹配元素 E 当它是其父元素的唯一一个子元素

    span:only-child() { color: red; }

  • E:nth-of-type(n): 匹配元素 E 当它是其父元素的第 n(从 1 开始)个出现的与 E 类型相同的子元素

    匹配<div id="tab2">this is tab2</div>

    div:nth-of-type(2) { color: red; }

  • E:nth-last-of-type(n): 匹配元素 E 当它是其父元素的倒数第 n(从 1 开始)个出现的与 E 类型相同的子元素

    匹配<div id="tab1">this is tab1</div>

    div:nth-last-of-type(2) { color: red; }

  • E:first-of-type: 匹配元素 E 当它是其父元素的第 1 个出现的与 E 类型相同的元素子元素(可能有多个)

    h3:first-of-type { color: red; }

  • E:last-of-type: 匹配元素 E 当它是其父元素的倒数第 1 个出现的与 E 类型相同的元素子元素(可能有多个)

    h3:last-of-type { color: red; }

  • E:only-of-type: 匹配元素 E 当它是其父元素下唯一一个 E 类型的元素

    h1:only-of-type { color: red; }

  • E:empty: 匹配元素 E 当没有子元素或内容时

    p:empty{ color: red; }

伪元素选择器

HTML：

 <div>
   <p>12<br>34</p>
 </div>

CSS 2.1

  • ::first-line: 匹配元素的第一行

    p::first-line { color: red; }

  • ::first-letter: 匹配元素的第一个字母

    p::first-letter { color: red; }

  • ::before: 在元素前通过 content 属性插入内容

    p::before { content: "*"; }

  • ::after: 在元素后通过 content 属性插入内容

    p::after { content: "*"; }

CSS 3

  • ::selection: 匹配鼠标框选的元素

    ::selection { color: red; }

多级选择器

HTML:

  <div id="div1">
      <div id="div2">
        <h1>this is dev2 > h1</h1>
        <h2>this is dev2 > h2</h2>
      </div>
       <div id="div3">this is dev3</div>
       <div id="div4">this is dev4</div>
       <h1>this is div1 > h1</h1>
    </div>

  • E, F: 多元素选择器，同时匹配 E 元素和 F 元素

    h1, h2 { color: red; }

  • E > F: 子元素选择器，匹配 E 元素的子元素 F

    #div2 > h1 { color: red; }

  • E F: 后代元素选择器，匹配 E 元素的后代元素 F

    #div1 h2 { color: red; }

  • E + F: 相邻元素选择器，匹配所有紧随 E 元素之后的 F 元素 匹配 div3

    #div2 + div { color: red; }

  • E ~ F: 同级元素选择器，匹配所有 E 元素之后的同级元素 F 匹配 div3，div4

    #div2 ~ div { color: red; }

优先级

!important > 行内样式 > ID > 类、伪类、属性 > 元素、伪元素 > 继承 > 通配符

avatar
文章
阅读
粉丝