css选择器

什么是选择器

CSS 选择器的作用是按照 CSS 规则定位 HTML 页面的一个或多个元素。浏览器在解析 HTML 页面时，会根据 CSS 规则中的选择器定位 HTML 页面的元素，并为对应的元素设定样式。

选择器的分类

  • 基本选择器：共有 5 个基本选择器，是 CSS 选择器的最为基本的用法。
  • 层级选择器：共有 4 个层级选择器，是根据 HTML 元素之间的关系来定位 HTML 元素。
  • 组合选择器：具有交集和并集两种用法，是将之前基本选择器和层级选择器进行组合。
  • 伪类选择器：允许未包含在 HTML 页面中的状态信息选定位 HTML 元素。
  • 伪元素选择器：定位所有未被包含 HTML 的实体。

基本选择器

  1. 类型（Type）选择器（有些中文资料中称为“元素选择器”）

    简单来说，就是元素选择器

    1
    2
    3
    4
    div {
          color: lightcoral;
          font-size: 24px;
        }

  2. 类（Class）选择器

    类名选择器，以.区分,对应的名称是标签中指定的class名

    1
    2
    3
    4
    .demo {
          color: lightcoral;
          font-size: 24px;
        }

  3. ID 选择器

    id选择器，以#区分,一个html文件中id只允许出现一次

    1
    2
    3
    4
    #Demo {
          color: lightcoral;
          font-size: 24px;
        }

  4. 通用选择器（有些中文资料中称为“通配符选择器”）

    用于指定html文件中所有元素的属性

    1
    2
    3
    * {
          color: lightcoral;
        }

  5. 属性选择器

    • [attr] 属性选择器：通过 HTML 元素的 attr 属性名来定位具体 HTML 元素，而不关注 attr 属性的值是什么。

      1
      2
      3
      4
      5
      [lang]{
              color: red;
          }

      <div lang="pt">哈哈哈哈</div>

  • [attr=value] 属性选择器：通过 HTML 元素的 attr 属性名并且属性值为 value 来定位具体 HTML 元素。

    1
    2
    3
    [lang="pt"] {
          color: green;
        }

  • [attr~=value] 属性选择器：通过 HTML 元素的 attr 属性名，属性值是一个以空格分隔的列表并且 value 值是该值列表中的之一，来定位具体 HTML 元素。

    1
    2
    3
    4
    5
    [lang~='pt']{
            color: red;
        }
    <div lang="pt pp">pt加空格</div>
    <div lang="pt">pt不加空格</div>

    QQ截图20200102232417.png

  • [attr|=value] 属性选择器：通过 HTML 元素的 attr 属性名并且属性值为 value 或者以 value- 为前缀来定位具体 HTML 元素。

    1
    2
    3
    [lang|='zz']{
            color: blue;
        }

    QQ截图20200102232614.png

  • [attr^=value] 属性选择器：通过 HTML 元素的 attr 属性名并且属性值是以 value 为开头来定位具体 HTML 元素。

    1
    2
    3
    4
    [href^='https']{
            background-color: yellow;
        }
    <a href="https://antmoe.com">asdas</a>

  • [attr$=value] 属性选择器：通过 HTML 元素的 attr 属性名并且属性值是以 value 为结束来定位具体 HTML 元素。

    与上一个类似

  • [attr*=value] 属性选择器：通过 HTML 元素的 attr 属性名并且属性值是包含 value 来定位具体 HTML 元素。

    包含即可，不会因为位置而无法匹配

    QQ截图20200102233301.png

优先级

计算法则（后定义的覆盖先定义的）

  1. 优先级就是分配给指定的 CSS 声明的一个权重，它由匹配的选择器中的每一种选择器类型的数值决定。
  2. 当优先级与多个 CSS 声明中任意一个声明的优先级相等的时候，CSS 中最后的那个声明将会被应用到元素上。
  3. 当同一个元素有多个声明的时候，优先级才会有意义。

内联样式总会覆盖内嵌样式表和外联样式表的任何样式。

!important 例外规则

破坏优先级，被修饰的成为最高级。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>!important规则</title>
  <style>
    div {
      color: blue !important;
    }

    .demo {
      color: red;
    }
  </style>
</head>

<body>
  <div class="demo">这是一个测试内容.</div>
</body>

</html>

最终的颜色为blue

  1. 一定要优化考虑使用样式规则的优先级来解决问题而不是 !important。
  2. 只有在需要覆盖全站或外部 CSS 的特定页面中使用 !important。
  3. 永远不要在你的插件中使用 !important。
  4. 永远不要在全站范围的 CSS 代码中使用 !important。

层级选择器

HTML元素之间的关系

类似于套娃，层与层之间的关系。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>HTML元素之间的关系</title>
</head>

<body>
  <div id="ancestor1">
    <div id="parent1">
      <div id="child11"></div>
      <div id="child12"></div> 

    </div>
    <div id="parent2">
      <div id="child2"></div>
    </div>
  </div>
  <div id="ancestor2"></div>
</body>

</html>

32c2c59d-f95d-4640-9952-86717cc3ec49.png

  • 兄弟元素：ancestor1 元素和 ancestor2 元素、parent1 元素和 parent2 元素，以及 child11 元素和 child12 元素。
  • 父级与子级元素：
    • 如果 `` 元素是父级元素的话，那 ancestor1 元素和 ancestor2 元素就是子级元素。
    • 如果 ancestor1 元素是父级元素的话，那 parent1 元素和 parent2 元素就是子级元素。
    • 如果 parent1 元素是父级元素的话，那 child11 元素和 child12 元素就是子级元素。
  • 祖先与后代元素：
    • 如果 `` 元素是祖先元素的话，那其包含的所有元素都是后代元素。
    • 如果 ancestor1 元素是祖先元素的话，那其包含的所有元素都是后代元素。
    • 如果 parent1 元素是祖先元素的话，那其包含的所有元素都是后代元素。

层级选择器种类

  • 后代选择器

    简单来说，该元素的所有后代元素。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    div span {
          background-color: lightcoral;
        }
    <div>
        <span>Span 1.
          <span>Span 2.</span>
        </span>
      </div>
    <span>Span 3.</span>

    这样只会影响到div里的span标签，而div外的标签则不会受到影响

  • 子级选择器

    定位该元素的所有子级元素。并不会影响孙子级元素

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <style>
        span{
            color: teal;
        }
        div>span{
            color: violet;
        }

        </style>
    </head>
    <body>
        <div>
            <span>
                哈哈哈
                <span>hahah </span>
                <a href="http://antmoe.com">ce </a>
            </span>
        </div>
    </body>
    </html>

    QQ截图20200102235104.png

  • 相邻兄弟选择器

    定位与该目标元素拥有同一个父级元素的下一个指定元素 不包括当前元素，只包括后边的元素

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <style>
        #a+li{
            color: red;
        }
        </style>
    </head>
    <body>
        <ul>
            <li id="a">1sadsada</li> <!-- 不会变色 -->

            <li>555555</li><!-- 变色 -->
        </ul>
    </body>
    </html>

  • 普通兄弟选择器

    简单来说就是p~codep元素之后的元素

    定位与该目标元素拥有同一个父级元素的之后任意指定元素

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    <!DOCTYPE html>
    <html lang="en">

    <head>
      <meta charset="UTF-8">
      <title>普通兄弟选择器</title>
      <style>
        span {
          background-color: lightgreen;
        }

        p~code {
          background-color: lightcoral;
        }
      </style>
    </head>

    <body>
      <span>This is not red.</span>
      <p>Here is a paragraph.</p>
      <code>Here is some code.</code> 会变色
      <span>And here is a span.</span>
    </body>

    </html>

组合选择器

组合（并集）选择器

h1, h2, h3, h4, h5, h6 { color:blue; }同时定义多个标签的属性。

组合（交集）选择器

1
2
3
4
5
p.cls {
    color: blueviolet;
}

表示把所有class名为cls的p标签都设置成blueviolet颜色

伪类选择器

伪类选择器是一种允许通过未包含在 HTML 元素的状态信息来定位 HTML 元素的用法。伪类选择器的具体用法就是向已有的选择器增加关键字，表示定位的 HTML 元素的状态信息。

1
2
3
4
/* 所有用户指针悬停的按钮 */
button:hover {
  color: blue;
}

否定伪类选择器

1
2
3
:not(selector) {
    属性 : 属性值;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>否定伪类选择器</title>
  <style>
    .fancy {
      text-shadow: 2px 2px 3px gold;
    }

    p:not(.fancy) { /*匹配class名不是fancy的p标签*/
      color: green;
    }

    body :not(p) { /*匹配body中不是p标签的标签*/
      text-decoration: underline;
    }
  </style>
</head>

<body>
  <p>我是一个段落。</p>
  <p class="fancy">我好看极了！</p>
  <div>我不是一个段落。</div>
</body>

</html>

注意：

  • 可以利用这个伪类提高规则的优先级。例如， #foo:not(#bar) 和 #foo 会匹配相同的元素。 但是前者的优先级更高。
  • :not(foo) 将匹配任何非 foo 元素，包括 html 和 body 元素。
  • 这个选择器只会应用在一个元素上，你无法用它排除所有父元素。

伪元素选择器

CSS 中伪元素选择器的用法与伪类选择器的用法类似，都是在指定 CSS 选择器增加关键字。但这两者的作用并不相同，伪类选择器是用来描述某个指定元素的状态信息，而伪元素选择器是用来描述某个指定元素的特定部分设定样式。

1
2
3
4
5
6
7
8
/* CSS3 语法 */
选择器::伪元素 {
  属性 : 属性值;
}
/* CSS2 过时语法 (仅用来支持 IE8) */
选择器:伪元素 {
  属性 : 属性值;
}

伪元素选择器的语法格式为 ::伪元素，一定不要忘记 ::。伪元素选择器只能和基本选择器配合使用，并且一个选择器只能使用一个伪元素选择器，如果要为一个选择器增加多个伪元素选择器需要分别编写。

before和after

::before 伪元素的作用是作为定位的 HTML 元素的第一个子级元素，::after 伪元素的作用是作为定位的 HTML 元素的最后一个子级元素。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        a::after{
            content: "→";
        }
        a::before{
            content: "♥";
        }
    </style>
</head>
<body>
    <div>
        <a href="https://antmoe.com">这是一个测试内容</a>
    </div>
</body>
</html>

QQ截图20200103001438.png

first-letter

::first-letter 伪元素的作用是为匹配元素的文本内容的第一个字母设置样式内容。 如下示例代码展示了**::first-letter 伪元素**的用法：

1
2
3
p::first-letter {
  font-size: 130%;
}

first-line伪元素

::first-line 伪元素的作用是为匹配 HTML 元素的文本内容的第一行设置样式内容。 如下示例代码展示了**::first-line 伪元素**的用法：

1
2
3
.line::first-line{
            background-color: tomato;
        }

GIF 2020-1-3 0-19-31.gif

::selection 伪元素

::selection 伪元素的作用是匹配用户在 HTML 页面选中的文本内容（比如使用鼠标或其他选择设备选中的部分）设置高亮效果。如下示例代码展示了**::selection 伪元素**的用法：

1
2
3
4
p::selection {
    color: gold;
    background-color: red;
}

GIF 2020-1-3 0-23-08.gif

只有一小部分 CSS 属性可以用于::selection 伪元素：

  • color 属性
  • background-color 属性
  • cursor 属性
  • caret-color 属性
  • outline 属性
  • text-decoration 属性
  • text-emphasis-color 属性
  • text-shadow 属性