CSS-0_1 CSS和层叠（样式优先级、内联样式、选择器 用户代理样式）

news2024/10/5 19:21:11

CSS 的本质就是声明规则

——《深入解析CSS》

文章目录

  • CSS
  • 层叠和优先级
    • 用户代理样式
      • 请和用户代理样式和谐相处
    • 选择器
      • 单选择器的优先级
      • 选择器组的优先级
      • 关于选择器的其他
        • 源码顺序
        • 尽可能的选择优先级低的选择器
    • 内联样式
      • 内联样式和JavaScript
    • !important
      • 多个 !important
    • 碎碎念
      • 常用选择器
        • 单独选择器
        • 组合选择器

CSS

CSS，全称为：Cascading Style Sheets，翻译过来叫 层叠样式表

顾名思义，CSS由 层叠 和 样式表 两部分构成

样式表很好理解，CSS会给引用他的文档内的元素设定各种各样的样式，这些样式通常以键值对的形式出现。这使得CSS看起来就像是一份样式对照表一样，所以叫样式表

但是层叠是什么玩意呢？


层叠，汉语里被用来形容东西都堆在同一个地方的状态

由此可知，CSS的意思是：堆叠在一起作用于同一批元素上的N个样式表

也就是说，CSS的规则是叠加的，元素最终呈现出来的样式是多个CSS样式共同作用的结果。当这些CSS样式之间存在对同一个属性的指定，则需要应用优先级最高的那个，这就是层叠




层叠和优先级

先从最简单的开始，先看这段代码：

<body>
    <h1>我是写在h1里面的文字</h1>
    <p>我是p</p>
</body>

这段代码长这样：

在这里插入图片描述

这两段文字并没有紧贴到左上角，不过我们不会因此觉得奇怪，因为我们知道不同的HTML标签就是会展示出不同默认样式。实际上，默认样式这个称呼不标准，这个东西应该叫：用户代理样式



用户代理样式

用户代理(User Agent) ，是指你用来渲染这个HTML文档的计算机程序，最常见的当然就是浏览器了

所以用户代理样式说白了就是你用的那个浏览器给HTML标签的基础样式

这个样式会随着你所使用的浏览器不同呈现出不同的效果，比如上面那个例子是我在 chrome 里运行的效果，如果把浏览器换成 Firefox，她就会变成这样：

在这里插入图片描述


请和用户代理样式和谐相处

如你所见，不同的浏览器对同一种标签有不同的处理的方式，因此很多人将用户代理样式看作洪水猛兽，恨不得整个界面都用div+span写成以避开用户代理样式带来的影响

事实上，虽然各个浏览器的用户代理样式不尽相同，但原则上是一致的。h1-h6是加粗后的标题，p标签是带margin的独段文字，button是一个审美落后的按钮。HTML之所以要存在这么多标签，不是为了让浏览器给他们写个完美的用户代理样式，而是为了增强代码的可读性，让维护这段代码的其他人理解这个元素的意义，而不是对着一堆div做解谜游戏



选择器

用户代理样式是无法修改的，不过好在她的优先级是最低的，你写的任何css代码都可以轻易的覆盖她，就像这样：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <h1 class="normal_word">我是写在h1里面的文字</h1>
        <p>我是p</p>
    </body>
</html>

<style>
    .normal_word {
        font-weight: normal;
    }

    p {
        font-size: 4em;
    }
</style>

在这里插入图片描述

我们在style标签中让h1的文字失去的加粗，让p标签中的文字变成了原来的4倍

这种写法，行话叫用 选择器声明样式。由于本文不是主要说明选择器的，所以只在本文最后简单枚举一下常用的选择器


单选择器的优先级

对于 单选择器 来说，优先级遵循以下规律

ID选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 标签选择器 > 通用选择器(*)

用户编写的css规则优先级的本质，其实就是比较所能影响的范围大小。所能影响的范围越小，元素越明确，那他的优先级越高

对单选择器来说：

  • ID选择器 因为在同一个页面中id是唯一的，所以id选择器只指定一个元素，优先级最高
  • 类选择器、属性选择器和伪类选择器 都是可以改变属性/状态一致的一批元素，所以优先级一致，排第二
  • 标签选择器 就更多了，只要是html标签是指定的标签，就都会受到影响，所以优先级更低
  • 通用选择器，所有的元素都会受到影响，几乎没有优先级可言

伪元素属于不同赛道的优先级，他必须依赖其他选择器存在，而且也必须用这种方式去指定他的样式，就像这样：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
</head>
<body>
<div id="d">
 <h1 class="green_word">我是div1中的文字</h1>
</div>
</body>
</html>

<style>
 .green_word::after{
     display: block;
     content: "我是伪元素";
     color: red;
 }

 #d{
     color: green;
 }
</style>

在这里插入图片描述
在这里插入图片描述

虽然我用id选择器要求div下的所有前景色变成绿色，但是使用类选择器+伪元素的前景色属性优先级还是比他高


选择器组的优先级

但是如果是选择器组，情况看起来就会复杂一点

就像这样：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div class="normal_word">
    <h1 id="h">我是div1中的文字</h1>
</div>
</body>
</html>

<style>
    .normal_word {
        font-weight: normal;
    }

    .normal_word h1 {
        color: green;
    }

    #h {
        color: blue;
    }
</style>

在这里插入图片描述

类名+标签 的组合让这句话的文字变成绿色，但是 ID选择器 要求这句话的文字变成蓝色

最终的结果显然是ID选择器胜出了


你玩过德州扑克吗？简单来说就是玩家用自己手里的牌凑牌型，然后用凑出的牌型比大小，如果对方手里有比你大的牌型，那你手里的牌点数多大都是输。当双方牌型一样了，那我们就来比谁的点数大

选择器组在比较优先级时候的思路是一样的，选择器组相当于牌型，单选择器相当于点数。先看牌型，如果我有一个id选择器，那即使你手里有一万个类选择器优先级也没有我高


所以上例如果要让文字变成绿色应该这样做：

.normal_word {
    font-weight: normal;
}

.normal_word #h {
    color: green;
}

#h {
    color: blue;
}

.normal_word #h 的牌型是：类选择器+id选择器，#h 的牌型是 id选择器

id选择器和id选择器互相抵消，前者还有一个类选择器，后者什么都没有了，所以前者胜出，就像这样：

在这里插入图片描述


关于选择器的其他

源码顺序

还有一种情况的优先级值得说明一下，那就是当两者的选择器优先级完全一致的时候，写在后面的样式会覆盖前面的样式，就像这样：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div class="blue_word" id="d">
    <h1 id="h" class="green_word">我是div1中的文字</h1>
</div>
</body>
</html>

<style>
    .blue_word #h {
        color: blue;
    }
    
    #d .green_word{
        color: green;
    }    
</style>

两个选择器的都是 id选择器+类选择器，优先级完全一致，此时文字的颜色由写在后面的样式决定

所以他是绿色的：

在这里插入图片描述

（把位置对调你就可以得到蓝色的文字）

这个原则更多是用于你在一个页面上引用多个css文件的时候，把针对性越强的内容放在越后面引用，可以保证在选择器优先级一致的情况下应用针对性更强的样式


尽可能的选择优先级低的选择器

这个原则同样是在多个css文件共同工作时体现效力，如果你在前面的css文件中使用优先级太高的样式，会导致后面的针对性样式写起来很别扭



内联样式

你肯定知道，除了上文提到的那种指定元素样式的方式以外，你还可以通过把样式直接声明在元素的 style 属性中以指定这个元素的样式。这种写法我们将其称之为：内联样式

根据上文我们推出来的优先级本质，内联样式的优先级一定是极高的，因为他只能对一个元素生效，所以他比所有的选择器样式优先级都要高

就像这样：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div class="green_word">
    <h1 id="d" style="color: purple;">我是div1中的文字</h1>
</div>
</body>
</html>

<style>
    h1{
        color: red;
    }

    .green_word *{
        color: blue;
    }

    #d {
        color: green;
    }
</style>

在这里插入图片描述

我们分别用 标签选择器、类+通用选择器 以及 id选择器指定了文字的不同颜色，但是最终生效的却是元素style属性里面定义的样式。这是内联样式高于所有选择器样式（或者说外部样式）的结果

那你会说了，不对啊，id选择器也是只对一个元素生效，为什么他的优先级没有内联样式高呢？

因为同一个页面里只能有一个ID这个效果，是我们给他加上的，并不是硬性要求，就像这样：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
</head>
<body>
<h1 id="d">我是div1中的文字</h1>

<h1 id="d">我是div2中的文字</h1>
</body>
</html>

<style>
 #d {
     color: green;
 }
</style>

在这里插入图片描述

编辑器会提示你这种写法有问题，但是浏览器是接受的


内联样式和JavaScript

在实际开发中，我们经常会遇到使用JavaScript去修改元素样式的情况

这时候如果你用 element.style.…… 的方式去修改样式，其实你是在给这个元素添加内联样式，这会让所有与之相关的选择器失效

如果是针对性很强的JavaScript代码倒是问题不大，可如果考虑到复用性，这会导致所有引用你的JavaScript包的人想要修改这个元素的样式时感到很别扭

所以更优雅的做法应该是定义一个类选择器，然后在JavaScript中去维护这个元素的类列表



!important

有的时候，我们需要无视前面的所有规则，把某一条规则的优先级提到最高，这就是 !important 的领域了

就像这样：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1 class="red" style="color: blue">我是写在h1里面的文字</h1>
</body>
</html>

<style>
    .red {
        color: red;
    }

    h1 {
        color: green;
    }
</style>

很显然，根据前面我们已经讲过的规则，我们会得到一段蓝色的文字，就像这样：

在这里插入图片描述


这是因为内联样式优先级最高导致的，可是如果我在h1这个标签选择器的规则中添加 !important，那结果就会截然不同，就像这样：

h1 {
    color: green !important;
}

在这里插入图片描述

明明是刚刚那段代码中优先级最低的标签选择器的样式，被应用了

这就是 !important 标识的作用，他可以无视所有规则，要求指定的这条规则优先级提升到最高


多个 !important

那你会说了，既然如此，那如果 !important 也层叠了，那怎么办呢？就像这样：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1 class="red" style="color: blue !important;">我是写在h1里面的文字</h1>
</body>
</html>

<style>
    .red {
        color: red;
    }

    h1 {
        color: green !important;
    }
</style>

不只是标签选择器了，现在连内联选择器也有 !important 了

还记得我们前面提到过的“牌型理论”吗？我们现在把 !important 也当作一个牌型，最大的牌型。所以抵消掉之后，内联样式>标签选择器，所以我们会得到一段蓝色的文字

结果也印证了我们的猜想：

在这里插入图片描述



碎碎念

讲完了，最后整理一下CSS的层叠优先级

  • 首先，CSS样式分两种，一种叫 用户代理样式，一种是 作者样式
    • 用户代理样式是浏览器自带的样式，他的优先级永远比你写的作者样式优先级低
  • 作者样式 又分有两种，一种是 通过选择器选中元素进行指定的外部样式，一种是 直接写在元素内的style属性里的内联样式
    • 内联样式优先级默认比外部样式优先级高
    • 外部样式之间则通过比较选择器的优先级来决定谁的优先级更高
    • 伪元素属于另一个优先级赛道的选择器
  • 当选择器优先级完全一致的时候，应用哪个样式由书写顺序决定
  • 当你想要无视一切优先级规则强制应用一个样式时，可以使用 !important

常用选择器

单独选择器
形式选择器名选择范围
*通用选择器选择所有元素
p元素选择器选择所有指定元素
.className类选择器选择所有class属性中包含className的元素
#IDID选择器选择所有id属性为ID的元素
*[attr=value]属性选择器选择所有attr属性为value的元素
p:hover伪类选择器选定所有p元素的hover状态
p::after伪元素选择器选定所有p元素后面的逻辑元素（没有实体的）
组合选择器
形式选择器名选择范围
A,B选择器列表（分组选择器）选中所有A和所有B
A B后代选择器选中A内的所有B
A>B直接后代选择器选中A内的所有直接子代B
A~B兄弟选择器选择同个父元素下所有排在A后面的同级B（无论是否紧挨A）
A+B接续兄弟选择器选择同个父元素下紧挨在A后面的同级B




万分感谢您看完这篇文章，如果您喜欢这篇文章，欢迎点赞、收藏。还可以通过专栏，查看更多与【CSS笔记】有关的内容

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1830399.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

Wing FTP Server v7.2.0 解锁版安装教程 (跨平台的专业FTP服务器软件)

Wing FTP Server v7.2.0 解锁版安装教程 (跨平台的专业FTP服务器软件)

前言 Wing FTP Server是一款跨平台的专业FTP服务器软件, 支持可扩展处理器架构采用异步IO处理, 在速度和效率方面领先于其他同类产品. 它在高负载的情况下也能持续地正常运行, 非常适合企业文件传输. 通过基于Web管理端, 何时何地都能轻松管理远程的服务器. 除了基本功能外, 它…
阅读更多...
qt笔记之qml和C++的交互系列(二)：rootObject

qt笔记之qml和C++的交互系列(二)：rootObject

qt笔记之qml和C的交互系列(二)&#xff1a;rootObject code review! —— 2024-06-17 杭州 夜 文章目录 qt笔记之qml和C的交互系列(二)&#xff1a;rootObject一.使用rootObject例程1.运行2.main.cpp3.main.qml3.用于Debug的加长版main.cpp 二.QML文件的根对象详解基本概念常…
阅读更多...
蜂鸣器：基础（1）

蜂鸣器：基础（1）

蜂鸣器&#xff1a;基础&#xff08;1&#xff09; 原文&#xff1a; In this tutorial, we are going to learn how to use the buzzer with Arduino, In detail, we will learn: 在本教程中&#xff0c;我们将学习如何将蜂鸣器与Arduino一起使用&#xff0c;将学习&#xff…
阅读更多...
C的I/O操作

C的I/O操作

目录 引言 一、文件与目录操作 1. 打开与关闭文件 2. 文件读写操作 3. 文件定位与错误处理 二、字符流与字节流 1. 字符流处理 2. 字节流处理 三、序列化与反序列化 1. 序列化 2. 反序列化 四、新的I/O&#xff08;NIO&#xff09; 表格总结 文件与目录操作 字符…
阅读更多...
证明 均匀分布 的期望和方差

证明 均匀分布 的期望和方差

均匀分布 均匀分布&#xff08;Uniform Distribution&#xff09;是一种常见的连续型概率分布&#xff0c;其中随机变量在给定区间内的每个值都有相同的概率。假设随机变量 ( X ) 在区间 ([a, b]) 上服从均匀分布&#xff0c;记作 均匀分布的概率密度函数&#xff08;PDF&am…
阅读更多...
好用的库函数，qsort函数大详解（干货满满！）（进阶）

好用的库函数，qsort函数大详解（干货满满！）（进阶）

前言&#xff1a; 小编在上一篇文章说了这一篇将要写qsort函数的模拟实现&#xff0c;那么废话不多说&#xff0c;现在开始进入今天的代码之旅喽&#xff01; 目录&#xff1a; 1.qsort函数的模拟实现的逻辑和思路 2.qsort函数模拟实现的代码实现 3.代码展示 1.qsort函数的模…
阅读更多...
YOLOv9独家提点|加入MobileViT 、SK 、Double Attention Networks、CoTAttention等几十种注意力机制（五）

YOLOv9独家提点|加入MobileViT 、SK 、Double Attention Networks、CoTAttention等几十种注意力机制（五）

本文介绍了YOLOv9模型的改进，包括加入多种注意力机制，如SE、CBAM、ECA和SimAM。此外，还探讨了MobileViT轻量级视觉Transformer在移动设备上的应用，以及SelectiveKernelNetworks和A2-Nets的双注意力结构。最后，CoTAttention网络在视觉问答任务中的改进展示了跨模态注意力交…
阅读更多...
今日早报 每日精选15条新闻简报 每天一分钟 知晓天下事 6月17日，星期一

今日早报 每日精选15条新闻简报 每天一分钟 知晓天下事 6月17日，星期一

每天一分钟&#xff0c;知晓天下事&#xff01; 2024年6月17日 星期一 农历五月十二 1、 今年首个红色山洪灾害预警&#xff1a;17日&#xff0c;浙江西南部、福建北部局地发生山洪灾害可能性很大。 2、 国家医疗保障局重构产科服务价格项目&#xff0c;“分娩镇痛”亲情陪产…
阅读更多...
AI大模型在运动项目的深度融合和在穿戴设备的实践及未来运动健康技术发展

AI大模型在运动项目的深度融合和在穿戴设备的实践及未来运动健康技术发展

文章目录 1. 技术架构2. 模型选择2.1 LSTM&#xff08;长短期记忆网络&#xff09;2.2 CNN&#xff08;卷积神经网络&#xff09;2.3 Transformer 3. 数据处理数据预处理 4. 实时性要求4.1 边缘计算4.2 模型优化 5. 数据隐私与安全6. 深入分析AI大模型在穿戴设备的应用和未来发…
阅读更多...
Yum安装LAMP

Yum安装LAMP

查看当前80端口是否被占用 ss -tulanp | grep 80查询httpd是否在yum源中 yum info httpd安装httpd yum -y install httpd启动httpd服务&#xff0c;设置开机自启 systemctl enable httpd --now systemctl start httpd查看当前进程 ps aux | grep httpd查看当前IP&#xff…
阅读更多...
Google谈出海：品牌「性价比」转向「心价比」

Google谈出海：品牌「性价比」转向「心价比」

Google Marketing Live中国站活动现场 越来越多的中国全球化品牌基于对全球消费和海外地区的深刻洞察&#xff0c;不断提升产品研发和迭代能力&#xff0c;在海外消费者心中塑造「中国质造」和「中国智造」的新形象。2023年6月15日&#xff0c;凯度与Google合作发布《2023 凯…
阅读更多...
AI数据分析：根据Excel表格数据进行时间序列分析

AI数据分析：根据Excel表格数据进行时间序列分析

ChatGPT中输入提示词&#xff1a; 你是一个Python编程专家&#xff0c;要完成一个Python脚本编写的任务&#xff0c;具体步骤如下&#xff1a; 读取Excel表格&#xff1a;"F:\AI自媒体内容\AI行业数据分析\toolify月榜\toolify2023年-2024年月排行榜汇总数据.xlsx"…
阅读更多...
vite-plugin-pwa 离线安装Vite应用

vite-plugin-pwa 离线安装Vite应用

渐进式Web应用&#xff08;PWA&#xff09;通过结合 Web 和移动应用的特点&#xff0c;为用户带来更加流畅和快速的体验。且PWA支持离线访问能力&#xff08;访问静态资源本地缓存&#xff09;&#xff0c;极大提高了用户交互的流畅性&#xff0c;降低非必要的网络依赖。尤其适…
阅读更多...
基于 U-Net 的图像分割

基于 U-Net 的图像分割

点击下方卡片&#xff0c;关注“小白玩转Python”公众号 图像分割是一种将图像划分为不同区域或对象的过程。它通常在像素级别进行&#xff0c;通过将图像中具有相似特征的区域分组或定义对象的边界来完成。这是一种识别和解析图像中不同对象或特征的方法。 假设一位医学专业人…
阅读更多...
气象数据NC、grb2解析成矢量json、CMIS、MICPS及图片应用到webgis

气象数据NC、grb2解析成矢量json、CMIS、MICPS及图片应用到webgis

一、基础概念 气象数据通常以多种格式存储和交换&#xff0c;以适应不同的应用需求和处理工具。以下是一些常见的气象数据格式及其转换方法的概述&#xff1a; 常见气象数据格式 1. NetCDF&#xff08;Network Common Data Form&#xff09;&#xff1a;一种自描述、自包含的…
阅读更多...
SD卡、MicroSD卡与SD NAND的全面对比分析

SD卡、MicroSD卡与SD NAND的全面对比分析

在当今多样化的存储设备市场中&#xff0c;SD卡、MicroSD卡和SD NAND因其不同的特性和应用场景而广受欢迎。这三种存储解决方案各有千秋&#xff0c;为消费者提供了丰富的选择。以下是MK米客方德SD卡、MicroSD卡和SD NAND全面的对比分析&#xff1a;
阅读更多...
springboot“漫画之家”系统 LW+PPT+源码

springboot“漫画之家”系统 LW+PPT+源码

3 系统分析 链接&#xff1a;https://pan.baidu.com/s/1ihILTui-XEFdC15mcOB0vA?pwdewry 提取码&#xff1a;ewry 3.1系统可行性分析 3.1.1经济可行性 由于本系统是作为毕业设计系统&#xff0c;且系统本身存在一些技术层面的缺陷&#xff0c;并不能直接用于商业用途&#xf…
阅读更多...
英伟达发布开源模型Nemotron-4 340B

英伟达发布开源模型Nemotron-4 340B

&#x1f680; 英伟达发布开源模型Nemotron-4 340B 摘要&#xff1a;英伟达最新发布的开源模型Nemotron-4 340B&#xff0c;可能彻底改变大语言模型&#xff08;LLM&#xff09;训练方式。该模型支持多种自然语言和编程语言&#xff0c;使用9万亿个token训练&#xff0c;高达9…
阅读更多...
python数据分析-心脏瓣膜手术风险分析与预测

python数据分析-心脏瓣膜手术风险分析与预测

一、研究背景和意义 人的心脏有四个瓣膜&#xff0c;主动脉银、二尖、肺动脉和三尖源 不管是那一个膜发生了病变&#xff0c;都会导致心脏内的血流受到影响&#xff0c;这就是通常所说的心脏期膜病&#xff0c;很多是需要通过手术的方式进行改善的。随着人口老龄化的加剧,&…
阅读更多...
Aeron:Multi-Destination-Cast

Aeron:Multi-Destination-Cast

Multi-Destination-Cast&#xff08;MDC&#xff09;是一种功能&#xff0c;允许 Aeron 从单个 Publication 同时向多个目的地传送数据。Multiple-Destination-Cast是 Aeron 的一项高级功能&#xff0c;本指南将介绍如何开发一个简单示例的基本知识。 一、MDC Publications 注&…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023