当前位置： 首页 > news >正文

【CSS in Depth2精译】1.1 层叠

news 文章来源：https://blog.csdn.net/frgod/article/details/139729103 2024/10/30 15:22:27

CSS 本质上就是声明规则，并让这些特定的规则在各种情况下生效。一个类添加到某个元素上，则应用这个类包含的这一些样式；元素 X 是元素 Y 的一个子节点，则应用另一些样式。浏览器于是根据这些规则，判定所有样式生效的具体位置，再将它们渲染到页面上。

如果看的都是些简单的示例，这个过程通常都很直观。但随着样式表的不断扩充，或者关联样式的页面一增多，CSS 代码很快就会以惊人的速度变得越来越复杂。在 CSS 里实现一个效果通常有若干种方法。当页面 HTML 结构变更、或者同一份样式被应用到不同的页面时，不同的实现方法会导致截然不同的最终结果。CSS 开发很关键的一点就是确保书写的样式是可预测的。

要做到这一点，首要任务就是理解浏览器究竟是如何解析您书写的样式的。每条规则单拎出来可能简单明了，但要是两条样式有冲突的规则放一起怎么办？某条规则可能因为与另一条规则相冲突而失效。要想预判这些样式规则的最终走向，就必须深入理解 CSS 里的层叠的概念。

为此，您需要构建一个简易的页面标题栏，就像您在某网页顶部看到的那样（如图 1.1 所示）。网站标题位于一组茶色导航链接的上方。最后一个导航链接为橙色，用来代表一个特色链接。

给纸质书读者的提示

本书中的许多图片应该查看彩色版本。我已尽力确保这些图片在黑白印刷时能看明白，但您可能碰巧觉得参考本书电子版里的彩图会很有帮助。获取 PDF、ePub 和 Kindle 格式的免费电子书，请访问 https://www.manning.com/books/css-in-depth 注册纸质书。

在构建这个网页头部时，您可能已经熟悉了大部分涉及的 CSS 样式。这样一来，就可以重点关注那些一知半解的部分了。

图 1.1 本章要实现的页面标题和导航链接效果
图 1.1 本章要实现的页面标题和导航链接效果

首先，创建一个 HTML 文档和一个名为 styles.css 样式表。将代码清单 1.1 中的内容添加到 HTML 里。

注意

本书的所有代码都可以访问代码库 https://github.com/CSSInDepth/css-in-depth-2 进行下载。该代码库已将所有 CSS 示例样式嵌入对应的若干 HTML 文档内（译注：以 style 标签形式给出，与书中代码略有不同）。

代码清单 1.1 网页头部的 HTML 标记

<!doctype html>
<html lang=”en-US”>
<head><meta charset="utf-8" /><link href="styles.css" rel="stylesheet" type="text/css" />
</head>
<body><header class="page-header"><h1 id="page-title" class="title">Wombat Coffee Roasters</h1> <!-- 网页标题 --><nav><ul id="main-nav" class="nav"> <!-- 导航链接列表 --><li><a href="/">Home</a></li><li><a href="/coffees">Coffees</a></li><li><a href="/brewers">Brewers</a></li><li><a href="/specials" class="featured">Specials</a></li> <!-- 特色链接 --></ul></nav></header>
</body>
</html>

当两个或更多规则指向页面上同一元素时，规则间可能包含相互冲突的声明，正如下面的代码所示。三个规则集，每一个都对页面标题指定了不同的字体系列（font family）。该标题不可能同时显示三种字体。哪一个会生效呢？将这些样式代码加到您的 CSS 文件内一探究竟。

代码清单 1.2 相互冲突的样式声明

h1 { /* 标签（或类型）选择器 */font-family: serif;
}
#page-title { /* ID 选择器 */font-family: sans-serif;
}
.title { /* 类选择器 */font-family: monospace;
}

声明冲突的规则集可能会连续出现，也可能分散在样式表的不同位置。无论哪种情况，这些规则集都指向了 HTML 中的同一个元素。

当三个规则集都去设置标题的字体系列，最终生效的是哪一个呢？要回答这个问题，浏览器就必须遵循一系列规则，来确保最终样式是可预测的。本例中，这些判定规则让第二个声明胜出，理由是其选择器中有 id；因此标题最终采用的是无衬线（sans-serif）字体（如图 1.2 所示）。

图 1.2 ID 选择器胜出，标题最终显示为 sans-serif 无衬线字体
图 1.2 ID 选择器胜出，标题最终显示为 sans-serif 无衬线字体

层叠 指的就是这一系列判定规则。它决定了解决冲突的方式，是 CSS 语言的核心基础。尽管大多数有经验的开发者对层叠的概念大致了解，但其中的部分规则有时还是会引发误解。

让我们来深入剖析层叠规则。当声明发生冲突时，层叠将按照以下顺序、先后通过六个判定标准来消除差异。后续将深入探究每一个判定标准，它们分别是：

  1. 样式表来源（Stylesheet origin）：样式是从哪里来的，包括您编写的样式和浏览器的默认样式。
  2. 内联样式（Inline styles）：无论是通过 HTML 的 style 属性（attribute），还是通过 CSS 选择器应用到某元素的样式，都在此列。
  3. 图层（Layer）：样式可以在具有不同优先级的每个图层中定义。
  4. 选择器优先级（Selector specificity）：哪些选择器优先于哪些。
  5. 作用域就近原则（Scope proximity）：样式是否只作用于 DOM 的某一部分。
  6. 源码顺序（Source order）：样式在样式表里的声明顺序。

其中一些判定标准受 !important 标注的影响，后续章节会重点讨论。图 1.3 概括地展示了这些规则的用法。

在这里插入图片描述
图 1.3 层叠的高级流程图，展示了冲突声明间的先后顺序

有了这些规则，浏览器才能在解决 CSS 冲突时表现出可预测性。在之前的例子中， #page-title 选择器就是基于这些规则而优于其他选择器并最终生效，尤其是选择器优先级的判定标准，很快我将详细阐释。

图层（Layers） 和 作用域（scope） 是 CSS 的新增内容，可以更明确地控制层叠。后续第 8 章、第 9 章将深入考察这部分知识。

首先需要强调的是，倘若样式表中没有任何图层，或者任何带作用域的样式，层叠的其余四个判定节点将按此前的惯例继续执行。让我们逐一分析剩下的这些规则：样式表来源、内联样式、选择器优先级和源码顺序。

相关文章：

【CSS in Depth2精译】1.1 层叠

CSS 本质上就是声明规则&#xff0c;并让这些特定的规则在各种情况下生效。一个类添加到某个元素上&#xff0c;则应用这个类包含的这一些样式&#xff1b;元素 X 是元素 Y 的一个子节点&#xff0c;则应用另一些样式。浏览器于是根据这些规则&#xff0c;判定所有样式生效的具…...

编程日记 2024/6/18 7:11:09

【读博日记】拓扑结构（待修正）

Topology 拓扑学 内容来源于互联网&#xff0c;还在甄别中——20240617 拓扑结构指把实体抽象成与其形状大小无关的点&#xff0c;把连接实体的线路抽象成线&#xff0c;再研究这些电线之间的关系。 所谓相似的拓扑结构&#xff1a; 例如一个圆环变成正方形、长方形、三角形…...

编程日记 2024/6/18 7:09:06

QT 中setVisible()和setEnabled()的区别

setVisible(bool)和setEnabled(true)在PyQt&#xff08;以及其他类似的图形用户界面框架&#xff09;中分别用于控制控件的可见性和可用性&#xff0c;它们之间的主要区别如下&#xff1a; setVisible(bool) 功能&#xff1a;这个函数用于设置QWidget控件的可见状态。参数&am…...

编程日记 2024/6/18 7:08:05

速度（velocity）、加速度（acceleration）、急动度（jerk）和弹跳度（snap）傻傻分不清楚？

...

编程日记 2024/6/18 7:06:03

【YashanDB知识库】PHP使用ODBC使用数据库绑定参数功能异常

【问题分类】驱动使用 【关键字】ODBC、驱动使用、PHP 【问题描述】 PHP使用PDO_ODBC连接yashan数据库&#xff0c;使用绑定参数获取数据时&#xff0c;客户现场出现报错 本地复现未出现异常报错&#xff0c;但是无法正确获取数据。 【问题原因分析】开启ODBC报错日志后&am…...

编程日记 2024/6/18 7:05:02

初级篇-Docker容器知识

Docker容器 容器主要是解决跨平台、跨服务运行环境的问题 容器将运行业务应用所需要的东西进行打包&#xff0c;包括依赖项、配置、脚本、二进制文件等。在容器中运行镜像&#xff0c;不用担心不同环境下运行不一致的问题。 容器本质上是一个特殊的进程&#xff0c;将资源、…...

编程日记 2024/6/18 7:03:00

【抽代复习笔记】19-群（十三）：奇偶置换、循环置换的几个定理及例题

定义&#xff1a; ①在Sn中&#xff0c;能够表示为奇数多个对换乘积的置换称为“奇置换”&#xff0c;能够表示为偶数多个对换乘积的置换称为“偶置换”&#xff1b; ②所有偶置换的集合记为An。 例1&#xff1a;&#xff08;1&#xff09;计算S1和S2中奇、偶置换的数目&…...

编程日记 2024/6/18 7:01:59

RT-Thread简介及启动流程分析

阅读引言&#xff1a; 最近在学习RT-Thread的内部机制&#xff0c;觉得这个启动流程和一些底层原理还是挺重要的&#xff0c; 所以写下此文。 目录 1&#xff0c; RT-Thread简介 2&#xff0c;RT-Thread任务的几种状态 3&#xff0c; 学习资源推荐 4&#xff0c; 启动流程分…...

编程日记 2024/6/18 7:00:57

MCU嵌入式AI开发笔记-视频笔记同步更新

MCU嵌入式AI开发笔记 抖音B站等站点笔记视频同步更新 01嵌入式AI大的方向 STM32跑神经网络 http://news.eeworld.com.cn/mp/EEWorld/a134877.jspx 为什么可以在STM32上面跑神经网络？简而言之就是使用STM32CubeMX中的X-Cube-AI扩展包将当前比较热门的AI框架进行C代码的转化，…...

编程日记 2024/6/18 6:57:53

DoIP——step2：车辆发现

文章目录 前言一、IP地址配置1.1 AutoIP1.2 DHCP1.3 DoIP实体的IP地址配置流程二、车辆发现车辆声明报文内容如下：前言 完成诊断设备到车辆的物理连接并通过激活线使能诊断连接后边缘节点将会将连接状态传递至应用层，在开始车辆发现过程之前，需要先进行各自的IP地址配置，获…...

编程日记 2024/6/18 6:56:52

【动态规划】0-1背包问题

【动态规划】0-1背包问题 题目:现在有四个物品&#xff0c;背包总容量为8&#xff0c;背包最多能装入价值为多少的物品? 我的图解 表格a【i】【j】表示的是容量为j的背包装入前i个物品的最大价值。 拿a【1】【1】来说&#xff0c;它的值就是背包容量为1&#xff0c;只考虑…...

编程日记 2024/6/18 6:55:51

WordPress 高级缓存插件 W3 Total Cache Pro 详细配置教程

说起来有关 WordPress 缓存插件明月已经发表过不少文章了，但有关 W3 Total Cache Pro 这个 WordPress 高级缓存插件除了早期【网站缓存插件 W3 Total Cache，适合自己的才是最好的！】一文后就很少再提及了，最近因为明月另一个网站【玉满斋】因为某些性能上的需要准备更换缓存…...

编程日记 2024/6/18 6:51:48

每日一题——Python实现PAT乙级1012 数字分类（举一反三+思想解读+逐步优化）五千字好文

一个认为一切根源都是“自己不够强”的INTJ 个人主页&#xff1a;用哲学编程-CSDN博客专栏&#xff1a;每日一题——举一反三Python编程学习Python内置函数 Python-3.12.0文档解读 目录 我的写法 代码优点 代码缺点 时间复杂度 空间复杂度 代码改进建议 我要更强 哲…...

编程日记 2024/6/18 6:50:47

Unity2D游戏制作入门 | 13 ( 之人物三段攻击 )

上期链接&#xff1a;Unity2D游戏制作入门 | 12(之人物受伤和死亡的逻辑动画)-CSDN博客 上期我们聊了人物的受伤和死亡的逻辑和动画&#xff0c;我们主要学习了事件的执行&#xff0c;即我们在人物受伤时可能会触发很多的事件&#xff0c;比如触发人物受伤的动画以及播放音乐等…...

编程日记 2024/6/18 6:49:45

DAY04 HTMLCSS

文章目录 一 表单(1) 数字控件(2) 颜色控件(3) 日期控件(4) 月份控件(5) 星期控件(6) 搜索控件(7) 范围控件 二 浮动框架三 结构化标签四 CSS1 CSS概述2 CSS的编写位置1. inline style 行内样式2. inner style 内部样式3. outer style 外部样式4. 小结 3 CSS选择器1. 通用选择器…...

编程日记 2024/6/18 6:48:44

Linux_理解程序地址空间和页表

目录 1、进程地址空间示意图 2、验证进程地址空间的结构 3、验证进程地址空间是虚拟地址 4、页表-虚拟地址与物理地址 5、什么是进程地址空间 6、进程地址空间和页表的存在意义 6.1 原因一&#xff08;效率性&#xff09; 6.2 原因二&#xff08;安全性&#xff09; …...

编程日记 2024/6/18 6:46:42

NAND闪存市场彻底复苏

在全球内存市场逐渐走出阴霾、迎来复苏曙光之际&#xff0c;日本存储巨头铠侠&#xff08;Kioxia&#xff09;凭借敏锐的市场洞察力和及时的战略调整&#xff0c;成功实现了从生产紧缩到全面复苏的华丽转身。这一转变不仅彰显了企业在逆境中的生存智慧&#xff0c;也为全球半导…...

编程日记 2024/6/18 6:44:40

过拟合与正则化

Location Beijing 过拟合 对于一个模型 A A A&#xff0c;解向量空间为 θ \theta θ&#xff0c;误差函数用式1表示 J ( θ ) J a c c [ y θ ( x ) − y ] 2 (1) J(\theta)J_{acc}[y_\theta(x)-y]^2\tag{1} J(θ)Jacc​[yθ​(x)−y]2(1) 首先我们考虑用模型 A A A拟合下…...

编程日记 2024/6/18 6:43:39

VMware挂载NAS存储异常处理

问题概述 由于非法关机或恢复&#xff0c;NFS存储可能会出现以下问题&#xff1a; 数据存储处于挂起状态或无法正常识别。虚拟机的配置文件或虚拟磁盘仍然注册在异常数据存储上。系统误认为有虚拟机在使用该数据存储。 问题对策 下面是详细的排查步骤和解决对策&#xff1a…...

编程日记 2024/6/18 6:41:36

Redis 7.x 系列【4】命令手册

有道无术&#xff0c;术尚可求&#xff0c;有术无道&#xff0c;止于术。 本系列Redis 版本 7.2.5 源码地址&#xff1a;https://gitee.com/pearl-organization/study-redis-demo 文章目录 1. 说明2. 命令手册2.1 Generic2.2 数据类型2.2.1 String2.2.2 Hash2.2.3 List2.2.4 S…...

编程日记 2024/6/18 6:40:35

走进Elasticsearch

什么是ES 是一个分布式、RESTful风格的搜索和数据分析引擎 中文参考文档&#xff1a; 《Elasticsearch中文文档》 | Elasticsearch 技术论坛 elasticSearch官网&#xff1a; Functions and Operators | Elasticsearch Guide [7.11] | Elastic查询方式 Kibana查询&#xff08;原…...

编程日记 2024/6/18 6:39:34

QT TCP服务器和客户端示例程序

下面是一个简单的 Qt TCP 服务器和客户端示例&#xff0c;演示了如何使用 vSetDriver、vSetListener 和 vTcpServerStart 函数。假设 vSetDriver 和 vSetListener 是你定义的自定义函数。 TCP 服务器部分 tcpserver.h #ifndef TCPSERVER_H #define TCPSERVER_H#include <QT…...

编程日记 2024/6/18 6:36:31

Xlua三方库Android编译出错解决办法

Xlua三方库Android编译出错解决办法 最近听老师的热更教程&#xff0c;讲到xlua编译android平台会报错&#xff0c;也是看了老师的博客&#xff0c;按照方法去解决&#xff0c;然而问题并没有解决。应该是因为代码更新或者版本不一样&#xff0c;在此简单记录一下解决过程。 参…...

编程日记 2024/6/18 6:34:28

美国犹他州立大学《Nature Geoscience》(IF=18)！揭示草本植物对土壤有机碳的重要贡献！

随着全球变暖的影响越来越显著&#xff0c;碳固定成为了一个备受关注的话题。在这个背景下&#xff0c;热带草原被认为是一个潜在的碳固定区域。然而&#xff0c;目前的研究主要关注于在热带草原中种植树木&#xff0c;以期望增加土壤有机碳含量。但是&#xff0c;热带草原中的…...

编程日记 2024/6/18 6:29:23

高考专业抉择计算机专业热度不减，兴趣、实力与挑战并存。

作为一名即将步入大学校门的高考生&#xff0c;我对于计算机相关专业是否仍是热门选择感到困惑。在过去几年里&#xff0c;计算机科学与技术、人工智能、网络安全、软件工程等专业一直备受追捧&#xff0c;吸引了无数学生。然而&#xff0c;随着市场竞争加剧和市场饱和度提高&a…...

编程日记 2024/6/18 6:28:21

Flask-RQ

Flask-RQ库教程 Flask-RQ 是一个用于在 Flask 应用中集成 RQ&#xff08;Redis Queue&#xff09;的扩展。RQ 是一个简单的 Python 库&#xff0c;用于将任务排入 Redis 队列并异步执行这些任务。这对于处理长时间运行的任务&#xff08;如发送电子邮件、生成报告等&#xff0…...

编程日记 2024/6/18 6:26:20

LeetCode 58. 最后一个单词的长度

LeetCode 58. 最后一个单词的长度 你一个字符串 s&#xff0c;由若干单词组成&#xff0c;单词前后用一些空格字符隔开。返回字符串中 最后一个 单词的长度。 单词 是指仅由字母组成、不包含任何空格字符的最大子字符串 示例 1&#xff1a; 输入&#xff1a;s “Hello World”…...

编程日记 2024/6/18 6:25:18

3阶段提交协议（3pc）

3阶段提交协议&#xff08;3pc&#xff09; 1 简介 三阶段提交协议是一个强一致、中心化的原子提交协议。解决了分布式事务、副本容错等分布式问题。其核心思想是将2PC的二阶段提交协议的“准备阶段”一分为二&#xff0c;形成了由CanCommit、PreCommit、DoCommit三个阶段组成…...

编程日记 2024/6/18 6:24:17

802.11中的各种帧

在无线网络中&#xff0c;802.11协议定义了三种类型的帧&#xff1a;管理帧&#xff08;Management Frames&#xff09;、控制帧&#xff08;Control Frames&#xff09;和数据帧&#xff08;Data Frames&#xff09;。每种类型的帧都有其特定的功能&#xff0c;帮助维护和管理…...

编程日记 2024/6/18 6:23:16

SAP PP学习笔记21 - 计划策略的Customize：策略组 ＞ 策略 ＞ 需求类型 ＞ 需求类（消费区分，计划区分）

上面几章讲了MTS&#xff0c;MTO&#xff0c;ATO的计划策略。 本章来讲一下它的后台 Customize。 1&#xff0c;Customizeing&#xff1a;Planned Indep.Reqmts Management 这是配置计划策略的整个过程&#xff1a; - Requirements Type / Class 需求类型 / 需求类 - Plann…...

编程日记 2024/6/18 6:22:15

wordpress 模版制作/佛山营销型网站建设公司

因为经常看到网上有看到求助ARP病毒防范办法&#xff0c;其实ARP欺骗原理简单&#xff0c;利用的是ARP协议的一个“缺陷”&#xff0c;免费ARP来达到欺骗主机上面的网关的ARP表项。　　其实免费ARP当时设计出来是为了2个作用的&#xff1a; 1&#xff0c;IP地址冲突检测 2&…...

编程日记 2024/10/30 10:05:58

大型的网站后台用什么做/网站排名seo软件

额&#xff0c;该死的博客园&#xff0c;没有像QQ邮箱一样的自动保存功能。。。。 说到老张让我看篇甲基化的文章。。。。所以又得拾起上学期学的web of science的使用了 首先让我们快速了解老张最近发的文献&#xff0c;了解下老张是做什么的&#xff08;好写最后的文献综述&a…...

编程日记 2024/10/29 23:14:20

网站建设费用会计分录/杭州seo全网营销

&#xff11;&#xff0e;客户会话状态 &#xff08;Client Session State&#xff09; 1.运行机制 2.使用时机 2.服务器会话状态 &#xff08;Server Session State&#xff09; 1.运行机制 2.使用时机 3.数据库会话状态 &#xff08;Database Session State&#xff09; 1.运…...

编程日记 2024/10/29 22:22:51

做网站美工赚钱吗/外贸网站都有哪些

libxml_disable_entity_loader &#xff08;PHP 5> 5.2.11&#xff0c;PHP 7&#xff09; libxml_disable_entity_loader - 禁用加载外部实体的功能 描述 bool libxml_disable_entity_loader &#xff08;[ bool $disableTRUE ]&#xff09; 禁用/启用加载外部实体的功能…...

编程日记 2024/10/29 16:29:37

手机主页哪个网站好/百青藤广告联盟

code.org和微软合作的项目&#xff0c;截图如下...

编程日记 2024/10/29 14:17:59

局网站内容建设考核/网站免费搭建

发布一个k8s部署视频&#xff1a;https://edu.csdn.net/course/detail/26967 课程内容&#xff1a;各种k8s部署方式。包括minikube部署&#xff0c;kubeadm部署&#xff0c;kubeasz部署&#xff0c;rancher部署&#xff0c;k3s部署。包括开发测试环境部署k8s&#xff0c;和生产…...

编程日记 2024/10/29 13:11:15