CSS篇十五——（1）

时间：2022-10-01 22:58:53

一、CSS的三大特性

CSS有三个非常重要的特性：层叠性、继承性、优先级

1.1 层叠性

给相同选择器设置相同的样式，此时一个样式就会覆盖（层叠）另一个冲突的样式。层叠性主要解决样式冲突的问题。

1.1.1 使用方式

层叠性原则：

  • 样式冲突，遵循的原则是就近原则，哪个样式离结构近，就执行哪个样式。
  • 样式不冲突，不会层叠。

注意： 所谓冲突是给相同选择器的相同属性设置了不同的属性值。

代码示例：

<!DOCTYPE html>
<html lang="zh-CN">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>三大特性之层叠性</title>
<style>
div {
color: red;
font-size: 18px;
        }

div {
color: green;
        }
</style>
</head>

<body>
<div>机会只会留给有准备的人！！！</div>
</body>

</html>

CSS篇十五——（1）

1.2 继承性

CSS中的继承：子标签会继承父标签的某些样式，如文本颜色和字号。

1.2.1 使用方式

代码示例：

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>三大特性之继承特性</title>
<style>
div {
color: red;
font-size: 20px;
        }
</style>
</head>

<body>
<div>
<p>龙生龙，凤生凤，老鼠的儿子会打洞！</p>
</div>
</body>

</html>

CSS篇十五——（1）

  • 恰当地使用集成可以简化代码，降低CSS样式的复杂性
  • 子元素可以继承父元素的样式有（text-，font-，line- 这些元素开头的可以继承，以及color属性）

1.2.2 行高的继承

代码示例：

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>三大特性之继承特性</title>
<style>
/* div {
            color: red;
            font-size: 20px;
        } */
/* 行高的继承性 */
body {
color: pink;
/* font: 12px/24px 'Microsoft YaHei'; */
font: 12px/1.5 'Microsoft YaHei';
        }

div {
/* 子元素继承了父元素 body 的行高 1.5 */
/* 这个1.5 就是当前元素文字大小 font-size 的 1.5倍， 因此此处也就是 21px */
font-size: 14px;
        }
</style>
</head>

<body>
<!-- <div>
<p>龙生龙，凤生凤，老鼠的儿子会打洞！</p>
</div> -->
<div>行高的继承性</div>
<p>行高的继承性</p>
</body>

</html>

CSS篇十五——（1）

实际开发中也有下面的写法：

body {
  font: 12px/1.5 Microsoft YaHei;
}

CSS篇十五——（1）

  • 行高可以跟单位也可以不跟单位
  • 如果子元素没有设置行高，则会继承父元素的行高为1.5倍的当前元素字体大小即（此时的子元素的行高是：当前元素的文字大小*1.5）
  • body 行高1.5 这样写法最大的优势就是里面的子元素可以根据自己文字的大小自动调整行高，实际开发中比较常见！

1.3 优先级

当同一个元素指定多个选择器，就会有优先级的产生：

  • 选择器相同，则执行层叠性
  • 选择器不同，则根据选择器权重执行

1.3.1 使用方式

选择器权重如下表所示：

选择器

选择器权重

继承 或者 *

0,0,0,0

元素选择器

0,0,0,1

类选择器，伪类选择器

0,0,1,0

ID选择器

0,1,0,0

行内样式 style=""

1,0,0,0

!important 重要的

∞ 无穷大

代码示例：

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>三大特性之优先级</title>
<style>
div {
color: pink !important;
        }

.priority {
color: steelblue;
        }

#testID {
color: orange;
        }

/* 父亲的权重为100 */
#father {
color: yellow;
        }

/* p继承的权重为0 但p本身的权重为1，因为1>0，所以用的p标签自己的样式 */
/* 以后看标签到底执行哪个样式，先看这个标签有没有直接被选出来 */
p {
color: rgb(83, 15, 15);
        }

body {
color: wheat;
        }

/* a链接浏览器默认指定了一个样式 蓝色的 有下划线的 a {color: blue;} */
/* 所以要修改a 链接的样式要给a 单独指定 */
a {
color: turquoise;
text-decoration: none;
        }
</style>
</head>

<body>
<div class="priority" id="testID" style="color: greenyellow">我和我的祖国，一刻也不能分割</div>
<!-- 权重注意点 -->
<div id="father">
<p>权重注意点</p>
</div>
<a href="#">我是单独的样式</a>
</body>

</html>

CSS篇十五——（1）

优先级注意点：

1.权重是由4组数字组成，但是不会有仅为。

2.可以理解为类选择器远大于元素选择器，id选择器远大于类选择器，以此类推

3.等级判断从左向右，如果某一位数值相同，则判断下一位数值。

4.简单记忆法：通配符和继承权重为0，标签选择器为1，类（伪类）选择器为10，id选择器为100，行内样式表为1000，!important为无穷大。

5.继承的权重为0，如果该元素没有直接选中，不管父元素权重多高，子元素得到的权重都是0.

标签：

相关文章