【CSS in Depth2精译】1.1.4 源码顺序

解决层叠冲突的最后一环叫做 源码顺序,有时又称为 出现顺序(order of appearance。如果其他判定规则均一致,则样式表中后出现的、或者在页面较晚引入的样式表声明,将最终胜出。

也就是说,可以通过控制源码出现的顺序来给示例中的特色链接添加样式。如果两个存在冲突的选择器优先级也相同 ,则出现较晚的一方将胜出。再来看看下面给出的第四种样式实现方案。这里用到了一个复合选择器 a.featured,中间没有空格。该选择器指向同时满足两个条件的元素:带 featured 类的 <a>

代码清单 1.10 试行方案四

.nav a {color: white;background-color: #13a4a4;padding: 5px;border-radius: 2px;text-decoration: none;
}a.featured {  /* 优先级变为 (0,1,1) */background-color: orange;
}

该方案中的两个选择器优先级相等,源码顺序决定了哪个声明实际作用于特色链接,最终获得一个橙黄色背景。

问题看似解决了,但也引入了一个潜在的新问题:如果想在页面其他位置(导航菜单之外)沿用 featured 类,情况又如何呢?如图 1.7 所示,在页面其他位置添加一段内容 <a class="featured">our specials</a> ,会得到一种奇怪的混合样式:背景还是橙黄色,但导航链接的文字颜色、内边距及圆角半径信息都丢失了。

图 1.7 在导航之外使用 featured 类产生的怪异样式

图 1.7 在导航之外使用 featured 类产生的怪异样式

代码清单 1.11 给出了上述效果的 HTML 代码。目标元素仅被第二个选择器命中,而不受第一个影响,因此最终效果未能如愿。是否希望这个橙黄色按钮的样式在导航菜单以外的地方生效,得由您自己来定。如果确实需要,就必须把相关的样式一并带上。

代码清单 1.11 导航菜单外部的特色链接样式

<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>
<main><p>Be sure to check out<!-- nav 外的特色链接只保留了部分样式 --><a href="/specials" class="featured">our specials</a>.  </p>
</main>

除非网站有其他需求,否则我更倾向于第三种方法(代码清单 1.9)。理想情况下,您可以对其他位置可能出现的样式需求做出合理的预判,比如确定在别处也会用到这个特色链接,这种情况下,方案四(代码清单 1.10)也许更合适,当然也要注意补全 featured 类缺失的样式。

正如之前所说,在 CSS 中最好的答案通常是“这要看情况”。很多样式的效果都是一题多解,找出不同的实现方法并知晓每种方法的利弊,是非常有价值的。面对同一个样式问题,通常我会分两步来处理:首先找出能达到效果的几个方案,然后再思考其对应的选择器结构,并选出最符合需求的那个方案。

1 链接样式和源码顺序

在您刚开始学习 CSS 时可能就已经了解,要给链接设计样式,书写选择器时就必须遵循特定的顺序。这是因为源码顺序影响了层叠。以下代码给出了链接样式设计的正确打开方式。将它们添加到样式表的开头、nav 样式的前面:

代码清单 1.12 超链接样式

a:link {background-color: blue;color: white;text-decoration: none;padding: 2px;
}
a:visited {background-color: purple;
}
a:hover {background-color: transparent;color: blue;text-decoration: underline;
}
a:active {color: red;
}

层叠才是链接顺序之所以重要的核心本质:在优先级相同的情况下,靠后的样式会覆盖靠前的样式。如果一个元素同时拥有多个状态,则最后那个状态的样式会覆盖其他的状态。比如当用户悬停在已访问的链接上,则悬停样式生效;当用户在悬停状态下激活(activate,即点击它)该链接,激活样式会最终生效。

这个顺序有个不错的记忆口诀:LoVe/HAte (爱/恨法则)—— 即 link(链接)、visited(已访问)、hover(悬停)、active(激活)。注意,如果当中选择器的优先级改得与其他选择器不同,这个规则就会遭到破坏,并得到意想不到的结果。

小贴士

您还可以用 :any-link 伪类来匹配 :link:visited 状态下的链接。

2 层叠值

浏览器按照上面介绍的这些规则来解析页面上每个元素的每个 property 属性。在层叠规则中胜出的样式声明,称为一个 层叠值。元素的每个属性最多只有一个层叠值。例如页面上一个特定的段落,它可以拥有一上一下两个外边距,但不能同时具有两个不同的上外边距,下外边距也一样。如果 CSS 为同一个属性指定了不同的值,层叠规则最终会选出一个值来渲染元素,这个值就是层叠值。

层叠值

即作为层叠结果最终应用到某元素特定属性上的具体取值。

如果一个元素从未指定某个属性值,则该属性没有层叠值。还是以段落为例,可能就没有特定的边框或内边距。

3 越用越顺手的层叠规则

在处理层叠时曾经有两条通用的经验法则:一是不要在选择器中使用 ID;二是不要使用 !important 注解。一旦今后要覆盖这些样式,这两条经验法则似乎都只能帮倒忙。

它们看似没多大用处,但事无绝对。在当前的许多情况下实践这两条经验法则反而反响良好,尤其是在需要考虑图层和作用域的场景下;另一方面也要牢记,切莫为了赢得优先级的“军备之争”而习惯性地套用这两种方法。本书第三部分还将探讨一些控制层叠规则的现代化工具,并展示几个可以打破这些规则的示例。

关于重要性的一则重要提醒

当创建一个像 NPM 包这样的用于分发的 JavaScript 模块时,强烈建议尽量避免在 JavaScript 里使用行内样式。要是这样做了,那就相当于强迫调用该模块的开发人员站队:要么照单全收里面的所有样式,要么给每个需要修改的 property 属性统一添加 !important 标记。

正确的做法是在包内放一张样式表。如果组件需要频繁修改样式,通常最好是用 JavaScript 给元素添加或移除某个样式类。这样用户就可以放心使用您提供的样式,并根据需要做一些调整,而不用担心优先级带来的竞争问题。

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

textarea标签改写为富文本框编辑器KindEditor

下载 - KindEditor - 在线HTML编辑器 KindEditor的简单使用-CSDN博客 一、 Maven需要的依赖&#xff1a; 如果依赖无法下载&#xff0c;可以多添加几个私服地址&#xff1a; 在Maven框架中加入镜像私服 <mirrors><!-- mirror| Specifies a repository mirror site to…

【iOS】nil、Nil、NULL、NSNull的区别

nil nil是指一个不存在的OC实例对象的指针&#xff0c;也就是OC实例对象的空指针 NSObject *object nil;NSString *str nil;NSURL *url nil;id object1 nil;Nil 是指OC类对象的空指针 Class Class1 Nil;Class Class2 [NSURL class];NULL C语言指针类型的空…

利用ffmpeg将任意格式的视频转码为h264编码的mp4格式视频

h264(h265)编码的mp4格式为浏览器支持的视频格式&#xff0c;即通过浏览器(chrome等)可以打开本地或在线的h264(h265)编码的mp4视频文件。 参考文档1&#xff0c;ffmpeg mp4转h264、h265命令模式 https://blog.csdn.net/shizao/article/details/108578096 2&#xff0c;JavaC…

免费定位服务方案:华为定位+天地图逆地理编码实现位置信息查询

对于Android开发来说进行定位开发时会使用以下几个产品 高德定位sdk百度定位sdk腾讯定位sdk 由于这几款产品在商用时需要支付相应的费用&#xff0c;如果不使用这几款产品又该如何定位呢&#xff1f; 有一种解决方案就是 华为定位天地图逆地理编码实现位置信息查询 通过 华…

产品交付能力提升的探索与分享

在当前激励的市场竞争环境下&#xff0c;对项目交付的成本和毛利要求越来越高。如何能快速高效地完成项目交付已然成为我们矢志追求的目标。抛开人为因素对项目交付效率的影响&#xff0c;产品本身的交付能力才是关键。因此&#xff0c;在设计新产品时需要考虑其便捷交付性&…

【C++初阶路】--- 类和对象(中)

目录 一、this指针1.1 this指针的引出1.2 this指针的特性1.3. C语言和C实现Stack的对比 二、类的6个默认成员函数三、构造函数3.1 概念3.2 特性 一、this指针 1.1 this指针的引出 如下定义一个日期类Date class Date { public://void InitDate(Date* const this, int year …

COGNEX康耐视 INsight Micro系列视觉系统安装手测

COGNEX康耐视 INsight Micro系列视觉系统安装手测

【html】用html+css模拟Windows右击菜单

效果图&#xff1a; 在这个示例中&#xff0c;我为每个.second-list添加了一个.sub-menu的<div>&#xff0c;它包含了子菜单项。当鼠标悬停在.second-list上时&#xff0c;.sub-menu会显示出来。你可以根据需要调整这个示例以适应你的具体需求。 记住&#xff0c;这只是…

[学习笔记]-MyBatis-Plus简介

简介 Mybatis-Plus&#xff08;简称 MP&#xff09;是一个 MyBatis (opens new window)的增强工具&#xff0c;在 MyBatis 的基础上只做增强不做改变&#xff0c;为简化开发、提高效率而生。 简言之就是对单表的增删改查有了很好的封装。基本不用再单独写sql语句了。目前此类…

其实,人工智能包含了科学技术和非科学技术两个方面

人工智能包含了科学技术和非科学技术两个方面。 科学技术是指人类在认识自然和利用自然的过程中积累起来的系统知识&#xff0c;它是一种客观存在的物质力量。人工智能是计算机科学的一个分支&#xff0c;它企图了解智能的实质&#xff0c;并生产出一种新的能以人类智能相似的方…

海外优青ppt美化_海优ppt录音视频制作

海外优青 优秀青年科学基金项目&#xff08;海外&#xff09;旨在吸引和鼓励在自然科学、工程技术等方面已取得较好成绩的海外优秀青年学者&#xff08;含非华裔外籍人才&#xff09;回国&#xff08;来华&#xff09;工作&#xff0c;自主选择研究方向开展创新性研究&#xf…

【C++】const和函数参数

一、const 在 C 中&#xff0c;const 关键字用于定义常量。将 const 关键字放在指针的不同位置&#xff0c;其含义也不同。 1、指向常量的指针 const int* ptr; ptr 是一个指向 const int 的指针&#xff0c;ptr 所指向的值不能通过 ptr 修改&#xff0c;但指针本身可以改变…

论文学习_Teams of LLM Agents can Exploit Zero-Day Vulnerabilities

论文名称发表时间发表期刊期刊等级研究单位Teams of LLM Agents can Exploit Zero-Day Vulnerabilities2024年arXiv-伊利诺伊大学0.摘要 研究背景LLM 代理变得越来越复杂,尤其是在网络安全领域。研究表明,当给出漏洞描述和具体问题时,LLM 代理可以有效利用已经存在的漏洞。然…

云商崆峒乐购618活动2024:企业联动创辉煌

2024年6月18日&#xff0c;云商崆峒乐购618活动在平凉盛大开幕。本次活动由崆峒区商务局、崆峒区电子商务协会与平凉新世纪柳湖春酒业公司联合举办&#xff0c;旨在借助“618”全民线上欢购的热潮&#xff0c;整合平凉本地名优特产&#xff0c;推动崆峒区电商产业及特色网货的发…

mouseinc-smartUp Gestures被禁用后的替代品

前言 smartUp Gestures恶意软件,既然谷歌这么判断,可能大概率没错了,我们换一个mouseInc吧下载地址 https://www.123pan.com/s/fDzUVv-hCtlA 设置下会更好用 设置 通过AHK设置下一些快捷操作~ 对应的查找 https://source.chromium.org/chromium/chromium/src//main:chrome/a…

【MySQL】数据库

数据库概述 【MySQL】数据库概述-CSDN博客 数据库基本操作 【MySQL】数据库基本操作-CSDN博客 数据表基本操作 【MySQL】数据表基本操作-CSDN博客 约束 【MySQL】约束-CSDN博客 基本增删改查 【MySQL】基本增删改查-CSDN博客 多表操作 【MySQL】多表操作-CSDN博客 视图 …

Elasticsearch安装(windows)

先给出网址 elasticsearch&#xff1a;Download Elasticsearch | Elastic elasticKibana&#xff1a;Download Kibana Free | Get Started Now | Elastic Logstash&#xff1a;Download Logstash Free | Get Started Now | Elastic ik分词&#xff1a;Releases infinilabs/…

adb卸载系统应用

1.进入shell adb shell2.查看所有包 pm list packages3.查找包 如查找vivo相关的包 pm list packages | grep vivo发现包太多了,根本不知道哪个是我们想卸载的应用 于是可以打开某应用,再查看当前运行应用的包名 如下: 4.查找当前前台运行的包名 打开某应用,在亮屏状态输入 …

NX GC工具箱 替换模板标注及中心线丢失

NX GC工具箱 替换模板标注及中心线丢失 前期已对制图模板做了修改优化&#xff0c;170图框层&#xff0c;171零件视图层&#xff0c;172中心线层&#xff0c;173标注层。 GC工具箱替换模板原理是删除原指定图层&#xff0c;再添加模板到里面。 1.打开GC工具箱配置文件&#x…