W.T.的博客

Every day to be a little better

前端-CSS学习笔记04-CSS三大特性

发表于 更新于 分类于
本文字数： 4.1k 阅读时长 ≈ 4 分钟
继承性，层叠性，优先级

1. 继承性

  • CSS的某些属性具有继承性(Inherited)

    • 如果一个属性具备继承性, 那么在该元素上设置后, 它的后代元素都可以继承这个属性
    • 当然, 如果后代元素自己有设置该属性, 那么优先使用后代元素自己的属性(不管继承过来的属性权重多高)

  • 可以继承的常见属性

    • color，cursor
    • font-style，font-variant，font-weight，font-size，font-family，font
    • line-height，letter-spacing，list-style
    • text-indent，text-align，text-transform，text-shadow
    • visibility
    • white-space，word-break，word-spacing，word-wrap
    • …

  • 注意点

    • 可以通过调试工具判断样式是否可以继承

    • 也可以查看文档，文档中每个属性都有表明其继承性

    • 继承过来的是计算值，不是设置值

      • 以下代码中，div的字体大小是2em，p继承的字体大小也是2em，而不是4em(相对于父元素)
      1
      2
      3
      4
      5
      6
      7
      8
      <style>
        div {
          font-size: 2em;
        }
      </style>
      <div>
        <p>Hello World</p>
      </div>

  • 强制继承

    • border本身没有继承性，但是可以设置inherit值来得到父元素的属性值
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <style>
      div {
        border: 2px solid red;
      }
      p {
        border: inherit;
      }
    </style>
    <div>
      <p>Hello World</p>
    </div>

2. 层叠性

  • CSS的翻译是层叠样式表, 什么是层叠？

    • 对于一个元素来说, 相同一个属性可以通过不同的选择器给它进行多次设置
    • 属性会被一层层覆盖上去
    • 但是最终只有一个会生效

  • 那么多个样式属性覆盖上去, 哪一个会生效呢?

    • 判断一：选择器的权重, 权重大的生效, 根据权重可以判断出优先级
    • 判断二：先后顺序, 权重相同时, 后面设置的生效

  • 如何知道元素的权重?

2.1. 选择器的权重

  • 为了方便比较CSS属性的优先级，可以给CSS属性所处的环境定义一个权值(权重)

    • !important：10000
    • 内联样式：1000
    • id选择器：100
    • 类选择器、属性选择器、伪类：10
    • 标签选择器、伪元素：1
    • 通配符：0

  • 权重叠加计算公式

    • 每一级之间不存在进位
    选择器 行内样式个数 id选择器个数 类选择器个数 标签选择器个数 优先级
    h1 0 0 0 1 0001
    h1+p::first-letter 0 0 0 3 0003
    li>a[href=”en-US”]>.inline-warning 0 0 1 3(li,a,span) 0013
    #identifier 0 1 0 0 0100
    内联样式 1 0 0 0 1000

  • 比较规则

    1. 先比较第一级数字，如果比较出来了，之后的统统不看
    2. 如果第一级数字相同，此时再去比较第二级数字，如果比较出来了，之后的统统不看
    3. ……
    4. 如果最终所有数字都相同，表示优先级相同，则比较层叠性(谁写在下面)

  • 注意点

    !important如果不是继承，则权重最高，天下第一

  • 解题步骤

    1. 先判断选择器是否能直接选中标签，如果不能直接选中 -> 是继承，优先级最低 -> 直接pass
    2. 通过权重计算公式，判断谁权重最高

2.2. 案例一

最终div #one在id选择器列胜出

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<style>
  /* 行内标签，id选择器，类选择器，标签选择器*/
  /* 0,1,0,1 */
  div #one{
    color: orange;
  }
  /* 0,0,2,0 */
  .father .son{
    color: skyblue;
  }
  /* 0,0,1,1 */
  .father p{
    color: purple;
  }
  /* 0,0,0,2 */
  div p{
    color: pink;
  }
</style>

<div class="father">
  <p class="son" id="one">p标签</p>
</div>

2.3. 案例二

#father #son 在id选择器列胜出

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
29
30
<style>
  /* 行内标签，id选择器，类选择器，标签选择器*/
  /* 0,2,0,0 */
  #father #son{
    color: blue;
  }
  /* 0,0,2,1 */
  .father p.c2{
    color: black;
  }
  /* 0,0,2,2 */
  div.c1 p.c2{
    color: red;
  }
  /* 无法选中p标签 pass */
  #father{
    color: green !important;
  }
  /* 无法选中p标签 pass */
  div#father.c1{
    color: yellow;
  }
</style>

<div id="father" class="c1">
  <p id="son" class="c2">
    <!-- blue -->
    p标签
  </p>
</div>

2.4. 标签选择器选择一类

div div 胜出

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<style>
  /* 行内标签，id选择器，类选择器，标签选择器*/
  /* 0,0,0,2 */
  div div{
    color: skyblue;
  }
  /* 0,0,0,1 */
  div{
    color: red;
  }
</style>

<div>
  <div>
    <div>
      <!-- skyblue -->
      文本颜色？
    </div>
  </div>
</div>

2.5. 权重叠加每位不存在进制

.one胜出

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
29
30
31
32
33
34
35
36
37
<style>
  /* 0,0,0,12 */
  div div div div div div div div div div div div{
    color: red;
  }
  /* 0,0,1,0 */
  .one{
    color: pink;
  }
</style>

<div>
  <div>
    <div>
      <div>
        <div>
          <div>
            <div>
              <div>
                <div>
                  <div>
                    <div>
                      <div class="one">
                        <!-- red -->
                        文本颜色
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

2.6. 权重相同时比较层叠性

#box1 div 和 div #box3权重相等，按照先后顺序 #box1 div胜出

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<style>
  /* 行内标签，id选择器，类选择器，标签选择器*/
  /* 0,0,2,1 */
  .c1 .c2 div{
    color: blue;
  }
  /* 0,1,0,1 */
  div #box3{
    color: green;
  }
  /* 0,1,0,1 */
  #box1 div{
    color: yellow;
  }
</style>

<div id="box1" class="c1">
  <div id="box2" class="c2">
    <!-- yellow -->
    <div id="box3" class="c3">
    </div>
  </div>
</div>

2.7. 全是继承的特殊情况

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<style>
  /* 行内标签，id选择器，类选择器，标签选择器*/
  /* 继承
  	 可以直接选中p标签
  */
  div p{
    color: red;
  }
  /* 继承
  	 不能直接选中p标签，对于p标签来说也是继承
  */
  .father{
    color: blue;
  }
</style>

<div class="father">
  <!-- p标签文字颜色为red -->
  <p class="son">
    <!-- span标签样式继承于p -->
    <span>文字</span>
  </p>
</div>

3. 优先级

  • 特性

    • 不同选择器具有不同的优先级，优先级高的选择器样式会覆盖优先级低选择器样式

  • 优先级

    • 继承 < 通配符选择器 < 标签选择器 < 类选择器 < id选择器 < 行内样式 < !important

  • 注意点

    • !important 写在属性值的后面，分号的前面
    • !important 不能提升继承的优先级，只要是继承优先级最低
    • 实际开发中不建议使用!important
本文结束  感谢您的阅读