CSS三大特性

CSS的三大特性是为了化简代码、定位问题并且解决问题

继承性

继承性特点:

  • 子级默认继承父级的文字控制属性。
  • 注意:如果标签自己有样式则生效自己的样式,不继承。
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS特性-继承性</title>
  <style>
    body {
      font-size: 30px;
      color: aquamarine;
      font-weight: 700;
    }
  </style>
</head>

<body>
  <div>div标签</div>
  <p>p标签</p>
  <span>span标签</span>
  <a href="#">a标签</a>
</body>
</html>

其中div、p、span、a标签都会继承父级body标签所定义的属性。
但由于a标签有自己的颜色属性,则此处的a标签不会继承body的color属性,仍然为默认的蓝色。
在这里插入图片描述

层叠性

层叠性特点:

  • 相同的属性会覆盖:后面的CSS属性覆盖前面的CSS属性
  • 不同的属性会叠加:不同的CSS属性都生效
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS特性-层叠性</title>
  <style>
    div {
      color: red;
      font-weight: 700;
    }

    div {
      color: green;
      font-size: 30px;
    }
  </style>
</head>

<body>
  <div>div 标签</div>
</body>

</html>

两个相同的div,后面div的color属性相同,会覆盖前面的,只生效第二个。
而第一个的font-weight和第二个font-size属性不同,则都生效。
在这里插入图片描述

优先级

优先级:也叫权重,当一个标签使用了多种选择器时,基于不同种类的选择器的匹配规则

  • 规则:选择器优先级高的样式生效
  • 公式:通配符选择器 < 标签选择器 < 类选择器 < id选择器 < 行内样式 < !important
    (选中标签的范围越大,优先级越低)
  • 注意:!important可以提高权重,让优先级到最高,但谨慎使用
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS特性-优先级</title>
  <style>
    * {
      color: rebeccapurple !important;
    }
    div {
      color: red;
    }

    .box {
      color: aquamarine;
    }

    #test {
      color: chocolate;
    }
  </style>
</head>

<body>
  <div class="box" id="test" style="color: cornflowerblue;">div 标签</div>
</body>
</html>

此时虽然通配符优先级最低,但由于后面有提高权重的!important,让权重提到最高。
在这里插入图片描述

点赞(0) 打赏

评论列表 共有 0 条评论

暂无评论

微信公众账号

微信扫一扫加关注

发表
评论
返回
顶部