【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 ...
随机推荐
- [切图仔救赎]炒冷饭--在线手撸vue2响应式原理
--图片来源vue2.6正式版本(代号:超时空要塞)发布时,尤雨溪推送配图. 前言 其实这个冷饭我并不想炒,毕竟vue3马上都要出来.我还在这里炒冷饭,那明显就是搞事情. 起因: 作为切图仔搬砖汪,长 ...
- hibernate课程 初探单表映射1-11 通过hibernate API访问编写第一个小例子
hibernate 业务流程 1 创建配置对象 Configuration config = new Configuration().configure(); 2 创建服务注册对象 Service ...
- Compaq Visual Fortran生成静态库的方法及使用
Compaq Visual Fortran 6.5生成lib静态库详细方法: 打开Compaq Visual Fortran,新建Fortran Static Library工程,命名为ForLib: ...
- grafana快速入门
入门 本指南将帮助您开始并熟悉Grafana.它假定您有一台正在运行的Grafana服务器,并至少添加了一个数据源. 初学者指南 观看10分钟的初学者指南,以建立仪表板,以快速介绍设置仪表板和面板. ...
- 中标麒麟高级服务器操作系统V6
平台: linux 类型: 虚拟机镜像 软件包: java-1.6.0 mysql-5.1.5 python-2.6 qt3-3.3.8b basic software linux neokylin ...
- docker使用alpine系统构建tomcat镜像
FROM frolvlad/alpine-oraclejdk8 #此镜像使用alpine-glibc系统,精简jdk,只运行java程序,无法编译/构建 MAINTAINER huqiang:2018 ...
- 转: ZigBee/Z-Stack CC2530实现低功耗运行的配置简介
转: ZigBee/Z-Stack CC2530实现低功耗运行的配置简介http://bbs.elecfans.com/jishu_914377_1_1.html(出处: 中国电子技术论坛) 设备支持 ...
- C++,C++编程,Windows编程,MFC
编程 我们日常生活中接触到的电子类产品中的应用都是由编程而来 为什么编程,偷懒 我们通过编程驱使(指挥,命令)的是电信号 为什么上面说编程是偷懒,电的发现,给人们带来了便利,人们在各个方面驱使(换成“ ...
- pat甲级1012
1012 The Best Rank (25)(25 分) To evaluate the performance of our first year CS majored students, we ...
- linux 命令——45 free(转)
free命令可以显示Linux系统中空闲的.已用的物理内存及swap内存,及被内核使用的buffer.在Linux系统监控的工具中,free命令是最经常使用的命令之一. 1.命令格式: free [参 ...