【CSS】简略说明css的权重之分
/*权重 :id > class > 标签 (小环境) 权重:内联 > 内部 > 外部 (大环境) 小环境处于内部环境中 */ <style> #p1{ /* id类选择器 */ css样式 } .class{ /* class类选择器 */ css样式 } p #p3,#p1 { /* 混合选择 p3不生效 */ css样式 } p#p3,#p1 { /* 更为精确的混合选择 权重除内联之外最大 p1,p3都生效 */ css样式 } p { /* 标签选择 权重小于混合选择 */ css样式 } .class1:before { /* 调用伪元素选择器的结构类方法 */ content: ""; } </style>
还有一种情况就是使用!important,在这种情况下就会有所不同。
.test{
color:#fff !important;
}
!important的css定义是拥有最高的优先级的,优先于以上的内联、内部、外部
【CSS】简略说明css的权重之分的更多相关文章
- CSS特异性(CSS Specificity)的细节之CSS样式权重的计算与理解(CSS样式覆盖规则)
本篇讲解CSS特异性(CSS Specificity)的细节,也就是CSS样式选择器的权重计算 通过计算选择器的权重(weight)最终决定哪个选择器将获得优先权去覆盖其他选择器的样式设定,即“优先原 ...
- CSS中选择器优先级的权重计算
CSS中选择器优先级的权重计算 先看一段代码,如下: a{ color: red; } #box a{ color: green; } [class="box"] a{ color ...
- 从webkit内核简单看css样式和css规则优先级(权重)
目录 webkit中样式相关类及类间关系 样式规则匹配 权重(优先级)计算 权重相同时的覆盖原则 webkit中样式相关类及类间关系 资料来源: <webkit技术内幕> 结构相关类: 1 ...
- CSS样式的引入&区别&权重&CSS层叠性&CSS样式的来源
CSS样式的引入: 内部样式: 内部样式:写在当前页面style标签中的样式 内联样式:写在style属性中的样式 外部样式: link标签引入的CSS文件 @import引入的CSS文件,需要写在c ...
- CSS选择器、CSS hack及CSS执行效率
主要内容: 1.CSS选择器.优先级与匹配原理 2. CSS 引入的方式有哪些 ? link 和 @import 的区别是 ? 3.CSS hack 4.如何书高效CSS 一.CSS选择器.优先级与 ...
- css模块化及CSS Modules使用详解
什么是css模块化? 为了理解css模块化思想,我们首先了解下,什么是模块化,在百度百科上的解释是,在系统的结构中,模块是可组合.分解和更换的单元.模块化是一种处理复杂系统分解成为更好的可管理模块的方 ...
- CSS选择器优先级 CSS权值
计算指定选择器的优先级:重新认识CSS的权重 标签的权值为 0,0,0,1 类的权值为 0,0,1,0 属性选择的权值为 0,0,1,1 ID的权值为 0,1,0,0 important的权值为最高 ...
- CSS从零开始(1)--CSS基础语法
1.CSS语法 CSS规则有两个主要部分构成:选择器,以及一条或多条说明. 例如:selector{declaration1;declaration2;declaration3;......;} 注: ...
- h5 . css入门 2.CSS基础
CSS基础 学习目标 1.CSS简介 2.CSS语法 3.样式的创建 4.两种引入外部样式表的区别 5.样式表的优先级和作用域 6.CSS选择器 7.选择器的权重 8.浮动属性的简单应用 9.HTML ...
随机推荐
- LeetCode 069 Sqrt(x) 求平方根
Implement int sqrt(int x).Compute and return the square root of x.x is guaranteed to be a non-negati ...
- Storm概念学习系列之Topology拓扑
不多说,直接上干货! Hadoop 上运行的是 MapReduce 作业,而在 Storm 上运行的是拓扑 Topology,这两者之间是非常不同的.一个关键的区别是:一个MapReduce 作业 ...
- Docker最全教程之使用PHP搭建个人博客站点(二十二)
目录 官方镜像 编写简单的Hello world! 1. 编写Hello world! 2. 编写Dockerfile 3. 构建并运行 4. 直接使用PHP Docker镜像运行PHP脚本 构建自 ...
- SVN的搭建(入门篇)
如果转载,请注明出处,谢谢 1.安装SVN # yum install subversion 2.创建一个仓库 创建一个仓库svnrepos # svnadmin create /usr/svnrep ...
- 关于SQL Server数据库中的标识列
一.标识列的定义以及特点 SQL Server中的标识列又称标识符列,习惯上又叫自增列. 该种列具有以下三种特点: 1.列的数据类型为不带小数的数值类型 2.在进行插入(Insert)操作时,该列的值 ...
- webpack webpack-dev-server报错
Error: getaddrinfo ENOTFOUND localhost at errnoException (dns.js:28:10) at GetAddrInfoReqWrap.onlook ...
- 北航oo作业第四单元小结
1.总结本单元两次作业的架构设计 在我动手开始总结我的设计之前,我看了其他同学已经提交在班级群里的博客,不禁汗颜,我是真的偷懒.其他同学大多使用了新建一个类,用以储存每一个UMLelemet元素的具体 ...
- vuejs 实现富文本
<div v-html="ritchtext" style="font-size:32px;" v-if="!platform" &g ...
- css 03
DIV+CSS盒子模型 一.盒子模型css height width padding 内边距 margin 外边距 border 1.margin 外边距 margin-top:15px; marg ...
- COGS 11. 运输问题1
★★☆ 输入文件:maxflowa.in 输出文件:maxflowa.out 简单对比时间限制:1 s 内存限制:128 MB [问题描述] 一个工厂每天生产若干商品,需运输到 ...