CSS样式:覆盖规则

规则一:由于继承而发生样式冲突时,最近祖先获胜。

CSS的继承机制使得元素可以从包含它的祖先元素中继承样式,考虑下面这种情况:

<html><head><title>rule 1</title><style>body {color:black;}p {color:blue;}</style></head><body><p>welcome to <strong>gaodayue的网络日志</strong></p></body></html>

 strong分别从body和p中继承了color属性,但是由于p在继承树上离strong更近,因此strong中的文字最终继承p的蓝色。

 

规则二:继承的样式和直接指定的样式冲突时,直接指定的样式获胜。

在上面的例子中,假如还指定了strong元素的样式,如:

strong {color:red;}

那么根据规则二,strong中的文字最终显示为红色。

规则三:直接指定的样式发生冲突时,样式权值高者获胜。

样式的权值取决于样式的选择器,权值定义如下表:

css选择器权值
 标签选择器 1
 类选择器 10
 ID选择器 100
 内敛样式 1000
 伪元素(:first-child等) 1
 伪类(:link) 10

可以看到,内联样式的权值>>ID选择器>>类选择器>>标签选择器,除此以外,后代选择器的权值为每项权值之和,比如”#nav .current a”的权值为100 + 10 + 1 = 111。

规则四:样式权值相同时,后者获胜。

<p
class="byline">Written by <a
class="email"
href="mailto:jean@cosmofarmer. com">Jean Graine de Pomme</a></p>.byline a {color:red;}p .email {color:blue;}

“.byline a”与”p .email”都直接指定了上面的a元素,且权值都为11,根据规则四,最终显示蓝色。

规则五:!important的样式属性不被覆盖。

!important可以看做是万不得已的时候,打破上述四个规则的”金手指”。如果你一定要采用某个样式属性,而不让它被覆盖的,可以在属性值后加上!important,以规则四的例子为例,”.byline a {color:red !important;}”可以强行使链接显示红色。大多数情况下都可以通过其他方式来控制样式的覆盖,不能滥用!important。

转载于:https://www.cnblogs.com/Nyan-Workflow-FC/p/10419468.html

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

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

相关文章

try{}里有一个 return 语句,那么紧跟在这个 try 后的 finally {}里的 code 会 不会被执行,什么时候被执行,在 return 前还是后?...

这是一道面试题&#xff0c;首先finally{}里面的code肯定是会执行的&#xff0c;至于在return前还是后&#xff0c; 看答案说的是在return后执行&#xff0c;我觉得不对&#xff0c;百度了一下&#xff0c;有说return前的&#xff0c;有说return后的&#xff0c;还有return中间…

相机和镜头选型需要注意哪些问题

背景&#xff1a; 最近需要优于项目需求需要对工业相机和镜头进行选型&#xff0c;于是我就开启的学习相机之旅&#xff0c;虽然我一直在做机器视觉方向&#xff0c;但是我对相机的了解还是很少&#xff0c;我想正好趁这次机会好好学习一下。如果有错误的观点请指正。 一、相…

响应式网页布局 - W3Schools How-Tos 01

W3Schools教学系列 W3Schools是知名的网页设计&#xff0f;前端开发教学网站&#xff0c;不仅提供HTML、CSS、JavaScript等的详尽教学&#xff0c;还可以把它当作说明文件&#xff08;Documents&#xff09;。有经验的前端或多或少已经接触过这个网站&#xff0c;因为它经常出现…

正則表達式,终极使用!3个工具,搞定一切

文章前提&#xff0c;本人。不会正则的不论什么语法&#xff0c;仅仅懂一点正则的概念。本人从未自己写过正则&#xff0c;都是网上收罗进行改动的。相同。没有时间去研究正则。 可是为了方便&#xff0c;入手了几个工具。 如今就为大家一一展示。 第一个&#xff0c;regexBuil…

iOS 在tableview的侧滑事件里执行tableView.selectRow无效的解决办法

很奇怪的问题&#xff0c;在执行默认选中一个cell的时候&#xff0c;突然发现这句话不起作用了 &#xff08;我的场景是&#xff1a;当前cell侧滑删除后&#xff0c;默认选中上一个cell&#xff09; 搞了半天&#xff0c;终于发现罪魁祸首竟然是因为&#xff1a;这句话写在了侧…

VS2017 C++工程 执行python脚本

我解决了哪怕很小的一个问题&#xff0c;我也想记录下来来见证我的经历。 背景&#xff1a; 一、使用libhuru库生成pdf报告 最近参与一些测试工作&#xff0c;希望测试结束后能够根据测试得到的数据和图像自动生成测试报告&#xff0c;最开始调研到了生成报告的库有libharu和…

标准正弦波变频电源调制方式的实现

目前变频电源正不断向规模化、专业化、智能化、精细化方向发展。变频电源的技术随着工业电器电子制造的兴起而不断得到重视和发展。其中,中港扬以正弦脉SPWM为核心变频电源系统电路便是一个很好的代表。纯硬件电路在焊接电路上比较复杂&#xff0c;但是调节出来的SPWM波形比较完…

Jmeter教程索引贴

Jmeter教程索引贴 新的一年即将到来&#xff0c;不知不觉2015年自己在Jmeter方面总结的文章有十几篇&#xff0c;在此汇总一下&#xff0c;顺便也算是个总结吧。2016年&#xff0c;继续学习技术&#xff0c;总结&#xff0c;写文章。 一、基础部分&#xff1a; 使用Jmeter进行h…

类与接口(二)java的四种内部类详解

引言 内部类&#xff0c;嵌套在另一个类的里面&#xff0c;所以也称为 嵌套类; 内部类分为以下四种&#xff1a; 静态内部类成员内部类局部内部类匿名内部类一、静态内部类 静态内部类&#xff1a; 一般也称”静态嵌套类“&#xff0c;在类中用static声明的内部类。 因为是stat…

单例设计模式和多线程

单例设计模式 单例&#xff1a;整个项目中&#xff0c;有某个类或者某些特殊的类&#xff0c;属于该类的对象只能建立一个。 #include<iostream> using namespace std;class MyCAS { private:MyCAS(){}private:static MyCAS *m_instance;public:static MyCAS *GetInstanc…

运行imgui例程

背景&#xff1a;目前在做一个视觉测试系统&#xff0c;需要做一个界面&#xff0c;将相机获取的图像&#xff0c;以及测试过程中的数据呈现在界面上&#xff0c;在我印象里&#xff0c;做界面就用qt吧&#xff0c;直到这个月真要开始做界面了&#xff0c;我的领导给我建议用im…

性能测试总结(三)--工具选型篇

性能测试总结(三)--工具选型篇 本篇文章主要简单总结下性能测试工具的原理以及如何选型。性能测试和功能测试不同&#xff0c;性能测试的执行是基本功能的重复和并发&#xff0c;需要模拟多用户&#xff0c;在性能测试执行时需要监控指标参数&#xff0c;同时性能测试的结果不是…

创建一个最简单的imgui测试用例

在上一篇文章中&#xff0c;我们初步认识了一下imgui,并且成功运行了他提供的demo。这只是开始学习imgui的第一步&#xff0c;在实际使用时&#xff0c;我们需要将imgui应用到自己的工程中去&#xff0c;所以你需要具备将imgui加到你工程中去的能力&#xff0c;简单起见&#x…

idea中maven的setting.xml的配置

2019独角兽企业重金招聘Python工程师标准>>> <?xml version"1.0" encoding"UTF-8"?> <settings xmlns"http://maven.apache.org/SETTINGS/1.0.0" xmlns:xsi"http://www.w3.org/2001/XMLSchema-instance&qu…

ref和out区别总结

ref&#xff1a;是必需要先初始化才能用,但调用时可以对它什么也不做.out&#xff1a;可以不初始化也能用,但调用时一定要对其赋值(即使已经初始化的也要赋值,哪怕是赋一个和原来一样的值).转载于:https://www.cnblogs.com/gjnsmallworld/p/7216206.html

继 承(面向对象特征之一)

1&#xff1a;成员变量。 当子父类中出现一样的属性时&#xff0c;子类类型的对象&#xff0c;调用该属性&#xff0c;值是子类的属性值。 如果想要调用父类中的属性值&#xff0c;需要使用一个关键字&#xff1a;super This&#xff1a;代表是本类类型的对象引用。 Super&…

如何将cv::Mat类型转换为imgui中的ImTextureID类型

背景&#xff1a; 我原来的工程是使用opencv的&#xff0c;所以程序中的图像都是表示为cv::Mat类型&#xff0c;为了能够在imgui窗口中显示我的cv::Mat的图像&#xff0c;我找到了下面这个函数&#xff1a; void ImGui::Image(ImTextureID user_texture_id, const ImVec2&…

react native 原生模块桥接的简单说明

原文出自&#xff1a;https://github.com/prscX/awes...博客链接&#xff1a;https://ssshooter.com/2019-02... Android 创建原生模块包 通过继承 ReactPackage 为你的原生模块包创建 Java 类&#xff0c;可以这么写&#xff1a;覆盖 createNativeModules 和 createViewManage…

UVa 1354 天平难题 枚举二叉树

题意&#xff1a;给出房间宽度 r 和 s 个挂坠的重量 wi&#xff0c;设计一个尽量宽的天平&#xff0c;挂着所有挂坠。天平由一些长度为 1 的木棍组成&#xff0c;木棍的每一端要么挂一个挂坠&#xff0c;要么挂另外一个木棍。 这题卡了很久&#xff0c;看了很多大神的代码&…

通过指针便利图像元素

for (size_t y 0; y < image.rows; y) {//row_ptr为第y行的头指针&#xff0c;unsigned char* row_ptr image.ptr<unsigned char>(y);for (size_t x 0; x < image.cols; x) {//data_ptr: 指向待访问像素unsigned char* data_ptr &row_ptr[x*image.channels…