CSS之⑫CSS三特性理解

                         QQ:3020889729                                                                                 小蔡

CSS特性一：层叠性

层叠行图解
层叠性本质

CSS特性二：继承性

继承性图解
继承性本质

CSS特性三：优先级

优先级图解
优先级本质

                         QQ:3020889729                                                                                 小蔡

CSS特性一：层叠性

层叠行图解

在这里插入图片描述

层叠性本质

打个比方：天气下雨，假定我们出门需要人手一把伞，但是我却有两把，这时候，在两把中，我更喜欢才买的，够新，而且昨天采用过，放在门口刚好，不像旧的伞还要去找。
CSS的层叠性也就是这个样子的：
首先，无论是有多少的选择器作用于某一个标签，只要它们有相同的样式属性，必然最后显示的时候，所有的相同样式会重叠到一起，成为仅有的一个属性值——并且如果属性值不同，那么这时候，就取最近/最新的样式属性——就近原则。。
（不同的选择器同时作用——体现层叠性）代码展示：
css代码：

.nav-1 {
  width: 200px;
  height: 100px;
  font-size: 30px;
  /*前后不相同的字体大小，选择最近/最新的15px字体设置*/
  background-color: red;
}

.nav-2 {
  width: 200px;
  height: 100px;/*相同的保持不变*/
  font-size: 15px;
  background-color: yellow;
}

html代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>演示</title>
  <link rel="stylesheet" href="./演示css.css">
</head>
<body>
  <div class="nav-1">30px</div>
  <div class="nav-2">15px</div>
  <div class="nav-1 nav-2">是15px，还是30px呢？</div>
</body>
</html>

效果：
在这里插入图片描述
（相同的选择器，最后以层叠性更新最新的设置为准）代码演示：
css代码：

.nav {
  width: 200px;
  height: 100px;
  font-size: 30px;
  /*前后不相同的字体大小，选择最近/最新的15px字体设置*/
  background-color: red;
}

.nav {
  width: 200px;
  height: 100px;/*相同的保持不变*/
  font-size: 15px;
  background-color: yellow;
}

html代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>演示</title>
  <link rel="stylesheet" href="./演示css.css">
</head>
<body>
  <div class="nav">是30px呢?</div>
  <div class="nav">还是15px呢?</div>
</body>
</html>

效果：
在这里插入图片描述

CSS特性二：继承性

继承性图解

在这里插入图片描述

继承性本质

继承性打比方就是，我们假设长辈聪明，后代聪明。那么当我们的父母很聪明，我们也就继承了父母的聪明，但是呢，同时也继承了老一套的一些不太好的地方——最后，我们还会发展出其它的个人特色。
继承性的本质就是，在父标签下的子标签，会继承父标签的部分性质——建立在通用部分的样式会继承——比如、字体大小，颜色等——即子承父业.

代码演示：
html代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>演示</title>
  <link rel="stylesheet" href="./演示css.css">
</head>
<body>
  <div style="color:red">
    我是红色的div内容
    <p>我是div下的p标签的内容</p>
  </div>
</body>
</html>

效果：
在这里插入图片描述

CSS特性三：优先级

优先级图解

优先级本质

作为一个老生常谈的问题，优先级是很多编程/设计中都会考虑的问题——这个部分很容易理解，只是在使用时，需要在具体的地方配置合适的权重的选择器，改变优先级，实现功能。
优先级的本质，就是谁权重高，谁就在这一次或者一过程中起作用。
比如说：
类选择器的权重大于通配符选择器，所以，实现功能上——就会直接使用类选择的样式——而不会考虑层叠性/继承性。
代码演示：
css代码：

* {
  color:red;/*通配符选择器设置红色字*/
}

.nav {
  color: skyblue;/*类选择器设置天蓝色字*/
}

html代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>演示</title>
  <link rel="stylesheet" href="./演示css.css">
</head>
<body>
  <div class="nav">看看显示什么颜色的字</div>
</body>
</html>

效果：
在这里插入图片描述