CSS选择器

OG

4,265 words, 11 min read

2018/05/04 AM

708 views

CSS 选择器有哪些？哪些可以继承？以及各选择器之间优先级？

ID选择器

          1
2
3
4
5
          /* ID选择器 */
#box {
    width: 200px;
    height: 200px;
}

类选择器

          1
2
3
4
5
          .container {
    width: 1200px;
    height: 60px;
    margin: auto;
}

标签选择器

          1
2
3
          div, p {
    width: 800px;
}

相邻选择器

          1
2
3
          h1 + p {
    border-left: 1px solid skyblue;
}

后代选择器

          1
2
3
          li a {
    color: #000;
}

子选择器

          1
2
3
          ul > li, ol > li {
    list-style: none;
}

通配符选择器

          1
2
3
4
          * {
    margin: 0;
    padding: 0;
}

属性选择器

          1
2
3
          input[type="button"] {
    outline: none;
}

伪类选择器

          1
2
3
4
5
6
7
8
9
10
11
12
          a:hover {
    color: #0088f5;
}
p:first-of-type {
    /* 选择属于其父元素的第一个元素 */
}
p:last-of-type {
    /* 选择属于其父元素的最后一个元素 */
}
p:nth-child(2) {
    /* 选择属于其父元素的第二个子元素 */
}

CSS 属性继承

font , font-size，font-family , color , font-weight , text-align

CSS优先级

通配符 < 标签选择器 < 类选择器 < ID选择器 < 内联 < !important

          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
          <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS优先级</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        color: #ccc;
      }
      div {
        width: 200px;
        height: 50px;
        line-height: 50px;
        text-align: center;
        border: 1px solid #aaa;
      }
    </style>
</head>
<body>
  <div>测试优先级</div>
</body>
</html>

上面例子我们写了一些基本样式，并且给通配符 * 设置了默认文字颜色为 color: #ccc;

我们先测试标签选择器和通配符

因为 CSS 有着后面覆盖前面的原则，我们给 div 新增一个样式并放到通配符前

          1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
          <style>
    /* 新增属性开始 */
    div {
        color: red;
    }
    /* 新增属性结束 */
    * {
        margin: 0;
        padding: 0;
        color: #ccc;
    }
    div {
        width: 200px;
        height: 50px;
        line-height: 50px;
        text-align: center;
        border: 1px solid #aaa;
    }
</style>

我们发现样式被覆盖了，变成了红色，这说明标签选择器的优先级比通配符高

接下来测试类选择器和标签选择器

我们给 div 元素加一个 box 类，然后给 box 类设置属性

          1
2
3
4
5
6
7
8
9
10
11
12
13
14
          <style>
    /* 新增属性开始 放到通配符 * 前 */
    .box {
        color: skyblue;
    }
    /* 新增属性结束 */    
    /* 
        ....
       */
</style>
<body>
    <!-- 这里给div 加了一个 box 类 -->
    <div class="box">测试优先级</div>
</body>

文字颜色又发生了变化，这说明类选择器的优先级比标签选择器高

来来来，我们继续测试类选择器和ID选择器

          1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
          <style>
    /* 新增属性开始 */
    #box {
        color: blue;
    }
    /* 新增属性结束 */
    .box {
        color: skyblue;
    }
   /* 
        ....
   */
</style>

<body>
    <!-- 这里给div 加了一个 box ID -->
    <div class="box" id="box">测试优先级</div>
</body>

我们看到文字颜色又发生了变化，样式被覆盖了，这说明ID选择器的优先级比类选择器的优先级高

接下来我们比较ID选择器和内联样式

          1
2
3
4
5
6
7
8
9
10
          <style>
   /* 
        ....
   */
</style>

<body>
    <!-- 这里给div 加了行类样式 -->
    <div class="box" id="box" style="color: black;">测试优先级</div>
</body>

文字颜色又变成了黑色，很显然，内联样式优先级比ID选择器高

最后我们比较内联样式和**!important**

          1
2
3
4
5
6
7
8
9
10
11
12
13
14
          <style>
   /* 修改div标签选择器属性开始 */
    div {
        color: red !important;
    }
    /* 修改div标签选择器属性结束 */
   /* 
        ....
   */
</style>

<body>
    <div class="box" id="box" style="color: black;">测试优先级</div>
</body>

我们只是给标签选择器加上了!important ,文字颜色却变为了红色，这说明 !important的优先级比内联高

**样式冲突：**当我们通过不同的选择器，选中相同的元素，并且为相同的样式设置不同的值时，此时就发生了样式的冲突。发生样式冲突时，应用哪个样式由选择器的优先级决定

综上所述:

选择器	权重
内联样式	1，0，0，0
ID选择器	0，1，0，0
类和伪类选择器	0，0，1，0
元素选择器	0，0，0，1
通配选择器	0，0，0，0
继承样式	没有优先级

注意

比较优先级时，需要将所有的选择器的优先级进行相加计算，最后优先级越高，则越优先显示(分组选择器时单独计算的)，如果优先级计算后相同，此时则优先使用靠后的样式

Published at2018/05/04 AMinCode

#CSS

Creative Commons BY-NC 4.0

https://zhangwurui.cn/article/5

CSS变量

CSS变量是一种在CSS中定义的可重复使用的值，可以通过声明和调用自定义属性来实现动态改变样式和简化代码。

CSS定位

CSS定位是一种通过设置元素的位置属性（如position）和偏移量（如top、bottom、left、right）来控制元素在页面中的布局和排列方式。