CSS 的特性

·  阅读 45

「这是我参与11月更文挑战的第29天,活动详情查看:2021最后一次更文挑战

CSS 的特性包括继承和层叠。

1. CSS 属性的继承

  • CSS 中有些属性是可继承的,何为属性的继承?
    • 一个元素如果没有设置某属性的值,就会跟随父元素的值
    • 当然,一个元素如果有设置某属性的值,就使用自己设置的值
  • 比如 colorfont-size 等文本相关的属性一般都是可以继承的
  • 究竟哪些属性可以继承,不用死记硬背,用多了自然熟练。而且可以随时查阅官方文档找到答案
  • 不能继承的属性,一般可以使用 inherit 值强制继承
  • 浏览器开发者工具也会标识出哪些样式是继承过来的

image-20201202202100476.png

一个元素如果有设置某属性的值,则会使用自己设置的值,比如下面的 a 元素:

div {
  color: red !important;
}
复制代码
<div>
  我是 div 的内容<br>
  <span>我是一个 span</span><br>
  <a href="#">冰冰</a>
</div>
复制代码

image-20201203193708607.png

p 元素下不能放 div 元素,否则 html 结构会乱掉:

p div {
  color: red !important;
}
复制代码
<p>
  <div>我是 div 的内容</div>
</p>
复制代码

image-20201203194148746.png

2. 继承的注意点

  • CSS 属性继承的是计算值,并不是当初编写属性时的指定值(字面值)

image-20201202203239890.png

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box1 {
      font-size: 60px;
    }

    .box2 {
      /* font-size: 30px; */
      font-size: .5em;
    }
  </style>
</head>
<body>
  <div class="box1">
    <div class="box2">
      <p>哈哈哈</p>
    </div>
  </div>
</body>
</html>
复制代码

3. CSS 属性的层叠

  • CSS 允许多个相同名字的 CSS 属性层叠在同一个元素上

    • 层叠后的结果是:只有一个 CSS 属性会生效
    • 基本层叠:当选择器相同时,后面的属性会把前面的属性层叠掉
  • 浏览器的开发者工具非常清晰地显示了哪个 CSS 属性会生效

    • #box {
        color: red;
      }
        
      .word {
        color: green;
      }
        
      div {
        color: blue;
      }
      复制代码
      <div id="box" class="word">一段文字</div>
      复制代码

      image-20201202212110929.png

  • 哪个 CSS 属性会生效,取决于 CSS 属性所处环境的优先级高低

4. CSS 属性的优先级

  • 按照经验,为了方便比较 CSS 属性的优先级,可以给 CSS 属性所处的环境定义一个权值(权重)
    • !important -> 10000
    • 内联样式 -> 1000
    • id 选择器 -> 100
    • 类选择器、属性选择器、伪类 -> 10
    • 元素选择器、伪元素 -> 1
    • 通配选择器、后代选择器、兄弟选择器 -> 0
  • 比较优先级的严谨方法
    • 从权值最大的开始比较每一种权值的数量多少,数量多的优先级高,即可结束比较
    • 如果数量相同,比较下一个较小的权值,以此类推
    • 如果所有权值比较完后,发现数量都相同,则采用“就近原则”

举例 1

/* (假设)下面两个选择器作用在了同一个标签上,优先级更高的是第一个,因为在 id 选择器数量一样的前提下,第一个的类选择器数量更多 */
.five#radio .one #three { /* 2 个 id 选择器、2 个类选择器 */
  color: blue;
}

#box #btn .four div span { /* 2 个 id 选择器、1 个类选择器、2 个元素选择器 */
  color: red;
}
复制代码
<div id="box">
  <div id="btn">
    <div class="four five" id="radio">
      <div class="one">
        <span id="three">哈哈哈哈哈</span>
      </div>
    </div>
  </div>
</div>
复制代码

image-20201202214747478.png

举例 2

#main {
  color: red;
}

.box1.box2.box3.box4.box5.box6.box7.box8.box9.box10.box11.box12 {
  color: blue;
}
复制代码
<div id="main" class="box1 box2 box3 box4 box5 box6 box7 box8 box9 box10 box11 box12">哈哈哈哈哈</div>
复制代码

image-20201202215524170.png

5. CSS 属性使用经验

  • 为何有时候编写的 CSS 属性不好使,有可能是因为:
    • 选择器的优先级太低
    • 选择器没选中对应的元素
    • CSS 属性的使用形式不对
      • 元素不支持此 CSS 属性,比如 span 默认是不支持 widthheight
      • 浏览器不支持此 CSS 属性,比如旧版本的浏览器不支持 CSS3 的某些属性
      • 被同类型的 CSS 属性覆盖,比如 font 覆盖 font-size
  • 建议
    • 充分利用浏览器的开发者工具进行调试(增加、修改样式)、查错
分类:
前端
标签:
分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改