首页 CSS

# CSS 特性

# 继承性

  • 特性：子元素有默认继承父元素样式的特点 (子承父业)
  • 可以继承的常见属性 (文字控制属性都可以继承)
    1. color
    2. font-style, font-weight, font-size, font-family
    3. text-indent, text-align
    4. line-height
    5. …
  • 注意点 :
    • 可以通过调试工具判断样式是否可以继承
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>继承性</title>
  <style>
    /*所有控制文字的属性都可以继承, 不是控制文字的属性都不能继承*/
    div {
      color: red;
      font-size: 90px;
    }
  </style>
</head>
<body>
  <div>
    <span>这是div标签里面的span</span>
    <span>这是div标签里面的文字</span>
  </div>
</body>
</html>

# 继承失效的特殊情况

  • 如果元素有浏览器默认样式，此时继承性依然存在，但是优先显示浏览器的默认样式
    1. a 标签的 color 会继承失效
    2. h 系列标签的 font-size 会继承失效
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>继承性</title>
  <style>
    /*所有控制文字的属性都可以继承, 不是控制文字的属性都不能继承*/
    div {
      color: red;
      font-size: 30px;
      text-decoration: none;
    }
  </style>
</head>
<body>
  <div>
    <span>这是div标签里面的span</span>
    <span>这是div标签里面的文字</span>

    <a href="#">我是一个a标签</a>
    <h1>我是h1标签</h1>
  </div>
</body>
</html>

# 层叠性

  • 特性 :
    1. 给同一个标签设置不同的样式 → 此时样式会层叠叠加 → 会共同作用在标签上
    2. 给同一个标签设置相同的样式 → 此时样式会层叠覆盖 → 最终写在最后的样式会生效
  • 注意点 :
    1. 当样式冲突时，只有当选择器优先级相同时，才能通过层叠行判断结果
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">
    <title>层叠性</title>
    <style>
        /*给div设置不同的样式, 样式层叠*/
        div {
            background-color: pink;
            color: white;
            width: 300px;
            height: 300px;
        }

        span {
            background-color: #da3;
            background-color: yellow;
            color: black;
        }
    </style>
</head>
<body>
    <div>我是div标签</div>
    <span>我是span标签</span>
</body>
</html>

# 优先级

  • 特性：不同选择器具有不同的优先级，优先级高的选择器样式会覆盖优先级低选择器样式
  • 优先级公式 :
    • 继承 < 通配符选择器 < 标签选择器 < 类选择器 < id 选择器 < 行内样式 < !important
  • 注意点 :
    1. !important 写在属性值的后面，分好的前面！
    2. !important 不能提升继承的优先级，只要是继承 优先级最低
    3. 实际开发中不建议使用！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
27
28
29
30
31
32
33
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>优先级</title>
    <style>
        body {
            /*div继承body属性, div显示为红色*/
            color: red;
        }

        div {
            /*div标签选择器优先级大于继承, 所以div更新为绿色*/
            !important优先级最高, 所以div更新为绿色
            color: green !important;
        }

        .box {
            /*类选择器优先级大于标签选择器, 所以div更新为蓝色*/
            color: blue;
        }

        #one {
            /*id选择器由下级大于类选择器, 所以更新为灰色*/
            color: grey;
        }
    </style>
</head>
<body>
<!--    行内样式大于id选择器, 所以di更新为紫色-->
    <div class="box" style="color: purple">测试优先级</div>
</body>
</html>

# 优先级权重叠加计算

  • 场景：如果是复合选择器，此时需要通过权重叠加计算方法，判断最终哪个选择器优先级最高会生效

  • 权重叠加计算公式 : (每一级之间不存哎进位)

    image-20220301150626428

  • 比较规则 :

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

  • 注意点 : !important 如果不是继承，则权重最高！！！

更新于 阅读次数 次