CSS层叠性(重要)

2023-10-27

CSS层叠性(重要)
指多种CSS样式的叠加。
是浏览器处理冲突的一个能力,如果一个属性通过两个相同选择器设置到同一个元素上,那么这个时候一个属性就会将另一个属性层叠掉。
原则:
1、样式冲突,遵循的原则是就近原则,即CSS的书写位置。
2、样式不冲突,不会层叠

CSS继承性
写CSS样式表时,子标签会继承父标签的某些样式,如文本颜色和字号。想要设置一个可继承的属性,只需要将它应用于父元素即可。
注意:恰当地使用继承可以简化代码,降低CSS样式的复杂性。子元素可以继承父元素的样式(text-,font-,line-这些元素开头的都可以继承,以及color属性)

CSS优先级
定义CSS样式时,经常出现两个或更多规则应用在同一元素上,这时就会出现优先级的问题。
在考虑权重时,初学者还需要注意一些特殊的情况,具体如下:
继承样式的权重为0.即在嵌套结构中,不管父元素样式的权重多大,被子元素继承时,他的权重都为0,也就是说子元素定义的样式会覆盖继承来的样式。
行内样式优先。应用style属性的元素,其行内样式的权重非常高,可以理解为远大于100.总之,他拥有比上面提到的选择器都大的优先级。
权重相同时,CSS遵循就近原则,也就是说靠近元素的样式具有最大的优先级,或者说排在最后的样式优先级最大。
CSS定义了一个!important命令,该命令被赋予最大的优先级。也主浊说不管权重如何以及样式位置的远近,!important都具有最大优先级。

CSS特殊性(specificity)
关于CSS权重,需要一套公式来计算,由四位的数组成,值从左到右,左面的最大,一级大于一级,数位之间没有进制,级别之间不可超越。
继承或者*的值:0,0,0,0
每个元素(标签)值:0,0,0,1
每个类,伪类值为:0,0,1,0
每个ID为:0,1,0,0
每个行内样式值:1,0,0,0
每个!important值:无穷大

1、数位之间没有进制。
2、通过继承的影响的,权重为0,【即样式没有携带有文字标签】如:
.colorRed{
    color:#f00; /* 没有选中p标签,所以只是通过继承影响的,权重为0 */
}
p {
    color:#0f0; /* 权重为1 */
}
<div class="colorRed">
    <p>颜色</p>
</div>

代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">

	#father #son{ /*权重为0,2,0,0*/
		color:blue;
	}
	#father p .c2{ /*权重为0,1,1,1*/
		color:black;
	}
	div .c1 p .c2{ /*权重为0,0,2,2*/
		color:red;
	}
	#father {
		color:green !important; /*继承的权重为0*/
	}

	</style>	
</head>
<body>
	<div id="father" class="c1">
		<p id="son" class="c2">颜色</p>
	</div>		
</body>
</html>

效果如下:

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

CSS层叠性(重要) 的相关文章

  • 如何隐藏按钮元素的值?

    如何隐藏按钮的值 同时仍然显示按钮 我使用的颜色 透明 但这行不通 我想隐藏按钮的值 但不是所有按钮的值 我需要将 value 属性保留在按钮中 我只是不想让它被看见 如果您只想显示按钮而不显示任何文本 请将值设置为空字符串 然后手动设置按
  • rgb() 和 rgba() 不透明度有什么区别?

    我发现另一个关于 rgb 与 rgba 的问题非常相似 但它缺少关于使用的答案RGB 不透明度 我知道两者之间的区别 rgba 只是 rgb 但带有 alpha 不透明度 问题是 我使用带有不透明度值的 RGB 已经有几个月甚至几年了 它一
  • 如何让浮动的div对齐到顶部?

    下面的代码可以在这个小提琴中查看 http jsfiddle net VgG55 10 http jsfiddle net VgG55 10 我有以下标记 其中 div 按以下顺序放置 div class wrapper div class
  • CSS位置:绝对+动态高度

    我有 4 个 div 标签一个接一个 全在position absolute我使用它们对齐top and left 第三个 div 标签包含动态内容 并且 div 的高度根据其中的文本量而变化 然而 当我设置top and left在所有
  • 浏览器特定的 CSS 属性

    在哪里可以找到完整的 浏览器特定 css 属性 参考 我的意思是一些属性 例如 moz border radius这仅适用于 Firefox 或 webkit min device pixel ratio 这些示例仅适用于指定的 Web 浏
  • 如何使用 CSS 将 div 置于表格中心?

    我正在尝试向我的网站之一添加幻灯片 整个页面布局在一个 HTML 表格中 我非常讨厌它并且没有选择 我想将我的幻灯片放在该特定列的中心 我的 CSS 如下所示 slideshow position relative slideshow IM
  • 转换 SVG 过滤器

    我正在尝试创建一个像 SVG 圆圈上的阴影这样的材质设计 我希望当您单击圆圈时 这个阴影能够以良好的过渡来增长 但目前我正在努力弄清楚是否可以为这种过渡设置动画 所以我希望有人能够提供帮助 我添加了一个到目前为止所得到的小例子 一个带有阴影
  • 禁用任何类型的浏览器窗口滚动?

    有没有办法禁用滚动 不仅仅是滚动条 还有浏览器窗口的全部功能 根据您对 Keit 的回答 您不想在打开灯箱时滚动处于活动状态 如果是这种情况 您可以使用以下 css 在打开灯箱的同时向正文添加一个类 这个解决方案的好处是它保留了滚动 空间
  • 页面不会居中对齐

    我遇到了 CSS 问题 http www luukratief design nl dump parallax index html http www luukratief design nl dump parallax index htm
  • HTML / CSS 如何将图像图标添加到输入类型=“按钮”?

    我使用下面的 CSS 但它将图像放在按钮的中心 使用任何方式左对齐或右对齐图标
  • 如何仅在第一次访问时弹出模态窗口

    我有一个模式窗口 当您访问某个页面时会弹出 访客必须选择我同意或我不同意 我需要一个漂亮的小 jquery 脚本 它会记住谁之前访问过该页面并同意 这样他们每次访问该页面时就不会弹出模式 有人可以推荐一个好的脚本来使用吗 这是代码 div
  • 在CSS中,有什么比使其成为块元素更好的强制元素换行的方法呢?

    我有一个 H3 标题 我想将其样式设置为具有特定的背景颜色 但不让元素的背景占据父元素的整个宽度 鉴于 H3 默认情况下是块元素 我的样式需要将该元素更改为内联块元素 或者只是内联内联元素 如下所示 h3 background color
  • css如何让文本底部对齐?

    怎么做怎么做 a 文字底部对齐吗 我已经添加了height line height and vertical align bottom 但文本仍然在 div 的中间 怎么做 谢谢 Test in http jsfiddle net BanA
  • jQuery能否获取未绘制的动态元素的大小

    我的意思是如果我用 jQuery 和 DOM 创建一个 Element var MainHolder document createElement div addClass box 如果我打电话MainHolder width 如果不在窗口
  • 如何使用 HTML CSS JS 创建滑块/切换来更改屏幕上的字体大小 [关闭]

    Closed 这个问题需要多问focused help closed questions 目前不接受答案 is there any way I can make this gt 所以我想制作一个滑块 切换器 用户可以拖动 滑动它来改变不同的
  • Bootstrap:使用单个选项卡导航控制多个选项卡面板

    我想用一个选项卡导航来控制两个不同的选项卡内容 在 Bootstrap 3 中 我有一个使用逗号分隔数据目标的解决方案 如本例所示 https stackoverflow com a 19719859 1788961 https stack
  • 为什么连字符 (-) 分隔的类名在 CSS 中广泛使用 [关闭]

    Closed 这个问题是基于意见的 help closed questions 目前不接受答案 在浏览了一些网站和其他一些广泛使用的插件和框架中包含的一些 CSS 文件时 发现它们广泛使用连字符分隔的单词作为类名 实际上使用这样的类名有什么
  • 带滚动条的 HTML 画布

    我正在宽度不等的画布上绘制图表 每个画布可以有自己的滚动条吗 我尝试将所有画布放在一个 div 中并指定最大宽度 但它不起作用 是否有可能所有画布在页面上的可见宽度均为 500 像素 并且每个画布都有其滚动条来查看画布的整个宽度 谢谢 指定
  • 如何使用javascript隐藏div

    我想使用 Javascript 隐藏一个 div 下面是我的div div class ui dialog titlebar ui widget header ui corner all ui helper clearfix span cl
  • 为什么盒子大小调整不适用于画布元素上的宽度/高度属性?

    让我们考虑一下这段代码 canvas width 150px height 150px canvas box sizing border box border 5px solid

随机推荐

  • Android实现沉浸式状态栏实现在项目中的使用

    不得不说 Android实现沉浸式状态栏确实是一个不深不浅的坑 懂门路的人几分钟就能解决掉 不懂门路的人 网上找资料查资源估计也要个一两天 当然了 我也是苦于其中 不过到最后还是找出来了 ImmersionBar 一个star数超过5K的三
  • java实现xml文件读取和写入

    import java io File import java io FileInputStream import java io FileOutputStream import java io InputStream import jav
  • java中为什么MAX_ARRAY_SIZE的值为Integer.MAX_VALUE - 8

    数组对象的形状和结构 如int值数组 与标准Java对象类似 主要区别在于数组对象有一个额外的元数据 用于表示数组的大小 数组的最大尺寸为2 31 2147483648 但是需要8bytes的存储大小表示数组的长度等元数据 所以数组的大小定
  • dva 打包多个html,使用dva+umi+antd构建页面(一)

    使用dva umi antd构建页面 首先确保安装npm或者yarnhtml 建立新应用 首先建立应用目录node mkdir myapp cd myapp 推荐使用 yarn 建立应用 执行如下命令 react 若是你坚持用 npm 可执
  • HJ77火车进站

    思路 重复的子问题 每一次车进站可以选择 出 还是 不出 解决重复子问题 动规 or 深搜 此题 输出具体 方案 显然动规不符合 因此选择深搜 注意 除了维护数组 还需要维护一个栈结构 代码 include
  • 基于xxx的系统实现

    2 基于强化学习的Tic Tac To实现 3 基于文本的关键词打标 4 基于自然语言处理的情感分析系统 5 基于深度学习的语音识别系统 6 基于深度学习的人脸识别系统 7 随机森林的多分类问题研究 8 回归算法预测系统 9 决策树算法的分
  • 数据通信加密与防篡改及数字证书原理详解

    1 安全五要素 一般而言 同时满足了机密性 信息不被泄露或泄露后对别人来说并没实际价值 完整性 信息不被非法篡改或被篡改后可以检测到 和身份验证 和自己通信的人确实就是我认为和我正在通信的人 就可以认为是安全通信了 安全通信需要满足如下五点
  • QT中通过网络发送QImage的解决方案

    服务端 QImage img img load path QByteArray ba QDataStream ds ba QIODevice WriteOnly 将图片读入array 方便发送 ds lt
  • 二进制文件如何使用Notepad读取显示

    1 下载安装notepad 2 打开notepad 点击插件 plugins gt 插件管理 3 安装hex editor 滑动滚动条 找到hex editor 点击右上角安装 注 安装完后需要重启notepad 4 选择二进制文件后 右击
  • Linux线程互斥与同步

    目录 进程线程间的互斥相关背景概念 互斥和原子性 互斥量mutex 互斥量实现原理探究 锁是否需要被保护 如何保证申请锁的过程是原子的 可重入VS线程安全 Linux线程同步 条件变量 销毁条件变量 唤醒等待 进程线程间的互斥相关背景概念
  • 什么是抽象类

    抽象概念 当我们在做子类共性功能抽取时 有些方法在父类中并没有具体的体现 这个时候就需要抽象类了 在Java中 一个没有方法体的方法应该定义为抽象方法 而类中如果有抽象方法 该类必须定义为抽象类 抽象方法 没有方法体的方法 抽象类 包含抽象
  • Unity层级

    层级 层级是Unity中场景物体的一种属性 摄像机可以指明渲染层级以渲染场景中的部分物体 灯光可以指明照射层级以照亮部分物体 可以指定照亮某些层级的物体以显示阴影 层级还能用于设置物理碰撞关系 层级顺序 Unity中的渲染顺序自上而下大致分
  • 关于 Math.random()生成指定范围内的随机数的公式推导

    优质资源分享 学习路线指引 点击解锁 知识定位 人群定位 Python实战微信订餐小程序 进阶级 本课程是python flask 微信小程序的完美结合 从项目搭建到腾讯云部署上线 打造一个全栈订餐系统 Python量化交易实战 入门级 手
  • 用VS2015编译QGIS3.16.9源码

    TOC VS2015编译QGIS3 16 9源码 编译QGIS源码 由于编译QGIS时涉及依赖的开源库很多 过程比较麻烦 特在此记录编译的完整过程 以方便同道中人参考 同时也方便本人以后编译忘记步骤时回头看看 接下来就开干 一 VS2015
  • c语言输出txt文件不对齐,用fprintf函数打印同样的内容,样子不同。百度无解,望大佬帮忙...

    该楼层疑似违规已被系统折叠 隐藏此楼查看此楼 这是我的全部代码 功能是实现随机生成20个20以内的不重复的加减法 如果大佬们对我的代码思路和代码风格有什么建议 也希望能不吝赐教 include include include define
  • CSDN高校俱乐部2012年秋季巡讲安排及讲师介绍

    CSDN高校俱乐部2012年秋季巡讲行程在各位讲师 主席和指导教师的给力支持下已初步出炉 部分学校仍需要确认时间安排 大多数学校已确定巡讲时间 时间表列在下方 讲师介绍在最后 阵容强大值得期待 学校名单及安排 场序 地区 城市 分组 学校
  • SpringMVC视图解析器

    SpringMVC视图解析器 SpringMVC中的视图解析器的主要作用就是将逻辑视图转换成用户可以看到的物理视图 当用户对SpringMVC应用程序发起请求时 这些请求都会被SpringMVC的DispatcherServlet处理 通过
  • Xcode 调试之 Hello World

    编译 编译JKD 可以查看 Mac 编译 OpenJDK 8 调试 截图来自 https segmentfault com a 1190000005082098 调试 Hello World 编写好源文件 public class Hell
  • Linux命令行另类使用技巧

    0x00 基础简述 0x01 补全实践 bash completion zsh autosuggestions 文件名补全 特殊补全 命令行参数补齐 可编程补全 0x02 历史命令 设置历史记录 查看历史命令 搜索历史命令 前后移动历史命令
  • CSS层叠性(重要)

    CSS层叠性 重要 指多种CSS样式的叠加 是浏览器处理冲突的一个能力 如果一个属性通过两个相同选择器设置到同一个元素上 那么这个时候一个属性就会将另一个属性层叠掉 原则 1 样式冲突 遵循的原则是就近原则 即CSS的书写位置 2 样式不冲