9.前端笔记-CSS-CSS三大特性

三大特性：层叠性、继承性、优先级

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>Documenttitle>
    <style>
        div{
            color:green;
            font-size: 20px;
        }
        div{
            color: red;
        }
    style>
head>
<body>
    <div>css层叠样式按照就近原则div>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

在这里插入图片描述

2、继承性

子标签会继承父标签的某些样式，比如文本颜色和字号，简单理解就是：子承父业。
好处：降低CSS样式的复杂性
可以继承的部分：子元素可以继承父元素的样式（text-,font-,line-这些元素开头的可以继承，还有color属性）

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>Documenttitle>
    <style>
        div{
            color:green;
        }
        div{
            color: red;
        }
        
    style>
head>
<body>
    <div>css层叠样式按照就近原则div>
    <div>
        <p>css样式继承p>
    div>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

p继承了div
在这里插入图片描述

2.1 行高的继承

行高可以跟单位，也可以不跟单位,表示行高是当前文字的多少倍。这样写的好处：
元素可以根据自身文字大小动态调整行高

body{
	font-size:12px/1.5;//1.5表示当前行高是当前字号大小的1.5倍。12*1.5
}
1
2
3

练习：继承了行高是字体的1.5倍

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>Documenttitle>
    <style>
        div{
            color:green;
        }
        div{
            color: red;
            font:20px/1.5 "Hei Ti"
        }
        p{
            font-size: 30px;
        }

        
    style>
head>
<body>
    <div>css层叠样式按照就近原则div>
    <div>
        <p>css样式继承p>
    div>
body>
html>
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

在这里插入图片描述

3、优先级

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

选择器相同，按照层叠性进行执行（就近原则）
选择器不同，按照选择器的权重执行

选择器	权重
通配符*	0，0，0，0
元素（标签）选择器	0，0，0，1
类选择器，伪类选择器	0，0，1，0
id选择器	0，1，0，0
行内样式style=“”	1,0,0,0
!important重要的	无穷大
继承<通配符<元素

如果有多个import，就执行层叠性
a标签浏览器默认有样式：蓝色字体+下划线，所以不会继承父亲的这些属性值。需要修改a的样式，要单独设置
继承的权重是0，如果该元素没有直接选中，不管父元素权重多高，子元素得到的权重都是0

div{
	color：pink!important;
}
1
2
3

练习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>Documenttitle>
    <style>
        .nav{
            color: red;
        }
        p{
            color:green;
        }
        

        
    style>
head>
<body>
    <div>
        <p class="nav">样式优先级p>
    div>
body>
html>
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

在这里插入图片描述
练习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>Documenttitle>
    <style>
        .nav{
            color: red;
        }
        p{
            color:green!important;
        }
    style>
head>
<body>
    <div>
        <p class="nav">样式优先级importantp>
    div>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

在这里插入图片描述

3.1 权重叠加

场景：如果是复合选择器，则会出现权重叠加问题，需要重新计算权重
权重叠加不会有进位问题

div ul li---0,0,0,3
.nav ul li---0,0,1,2
a:hover------0,0,1,1
.nav a-----0,0,1,1
1
2
3
4

练习:
把第一个li元素的内容设置为粉色，加粗

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>Documenttitle>
    <style>
        .nav li{//权重是0，0，1，1
            color: green;
        }
        .nav .pink{//权重是0，0，2，0
            color: pink;
            font-weight: 700;
        }
    style>
head>
<body>
    <ul class="nav">
        <li class="pink">权重叠加li>
        <li>权重叠加li>
        <li>权重叠加li>
    ul>
body>
html>
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

在这里插入图片描述

相关阅读:
2022年R1快开门式压力容器操作考试模拟100题及答案
 java.lang.Object类(equals()方法、toString()方法)
Redis分布式锁的正确使用姿势
 一文详解快速排序详细到极致
 java工资管理系统计算机毕业设计MyBatis+系统+LW文档+源码+调试部署
 git代码管理工具使用全流程
 A. Balance the Bits--Codeforces Round #712 (Div. 1)
DevOps｜从特拉斯辞职风波到研发效能中的不靠谱人干的荒唐事
 【QT】 Qt自定义ui控件
 Camera-3A AE/AWB/AF
原文地址：https://blog.csdn.net/Ambition_ZM/article/details/128051260