css复合选择器的权重
选择器的权重
- 标签选择器的权重为0001
- class选择器的权重为0010
- id选择器的权重为0100
- 属性选择器的权重为0010
- 伪类选择器的权重为0010
- 伪元素选择器的权重为0010
- 包含选择器的权重:所包含选择器的权重之和
- 子选择器的权重:所包含选择器的权重之和
- 交集选择器权重为选择器之和
- 继承样式的权重为0000
- 行内样式的权重为1000
测试
<html>
<head>
<title>DOM Tests</title>
<style>
div #test2 {
color: #fff148;
}/* id权重高于class,先定义也不会被覆盖 */
div .test3 {
color: #fff148;
}/* 同等权重的情况下,被后定义的css覆盖 */
.test1 div {
color: #000;
}/* 交换选择器顺序,权重不变 *//* (比较基准) */
div:last-child {
color: #000;
}
div .test4 {
color: #fff148;
}/* 同等权重的情况下,后定义的css会覆盖先定义的 */
.test5 {
color: #fff148;
}/* 复合选择器权重等于选择器权重之和 */
div .test6 {
color: #fff148;
}/* 伪类选择器与class选择器权重相同 */
/*div:last-child {*/
/* color: #000;*/
/*}*/
</style>
</head>
<body>
<div class="test1">
<div id="test2"> test</div>
<div class="test3"> test</div>
<div class="test4"> test</div>
<div class="test5"> test</div>
<div class="test6"> test</div>
</div>
</body>
</html>
测试结果
css复合选择器的权重的更多相关文章
- 0013 CSS复合选择器:后代、子代、交集、并集、超链接伪类
重点: 复合选择器 后代选择器 并集选择器 标签显示模式 CSS背景 背景位置 CSS三大特性 优先级 1. CSS复合选择器 目标 理解 理解css复合选择器分别的应用场景 应用 使用后代选择器给元 ...
- 【CSS复合选择器、元素显示模式、背景】前端小抄(3) - Pink老师自学笔记
[CSS复合选择器.元素显示模式.背景]前端小抄(3) 本学习笔记是个人对 Pink 老师课程的总结归纳,转载请注明出处! 一.CSS的复合选择器 1.1 什么是复合选择器 在 CSS 中,可以根据选 ...
- CSS复合选择器
复合选择器是由两个或多个基础选择器,通过不同的方式组合而成的,目的是为了可以选择更准确更精细的目标元素标签. 交集选择器 交集选择器由两个选择器构成,其中第一个为标签选择器,第二个为class选择器, ...
- CSS复合选择器是什么?复合选择器是如何工作
复合选择器介绍 复合选择器其实很好理解,说白了就跟我们生活中的有血缘关系家庭成员一样,通过标签或者class属性或id属性,去找对应的有血缘关系的某个选择器,具体的大家往下看哦. 如果是初学者对基本的 ...
- CSS复合选择器和div盒子模型
一.复合选择器(3种) 1.交集复合选择器 特点:由2个选择器组成,其中第一个必须是标签选择器,第二个是类或id选择器.两个选择器之间没有空格(有空格属于层级选择器) <h3 class=&qu ...
- CSS复合选择器,元素的显示模式,CSS背景设置
欢迎大家去博客冰山一树Sankey,浏览效果更好.直接右上角搜索该标题即可 博客园主页:博客园主页-冰山一树Sankey CSDN主页:CSDN主页-冰山一树Sankey 前端学习:学习地址:黑马程序 ...
- 514 ,css不同选择器的权重(css层叠的规则)
!important规则最重要,大于其它规则 行内样式规则,加1000 eg,<html> <head> </head> <body> & ...
- css学习_css复合选择器
css复合选择器 a.交集选择器 (即...又...:选择器之间不能有空格) p.one{color:red;] b.并集选择器(中间由逗号隔开) p,div{color:red;} c.后代选择器 ...
- CSS.01 -- 选择器及相关的属性文本、文字、字体、颜色、
与html相比,Css支持更丰富的文档外观,Css可以为任何元素的文本和背景设置颜色:允许在任何元素外围设置边框:允许改变文本的大小,装饰(如下划线),间隔,甚至可以确定是否显示文本. 什么是CSS? ...
随机推荐
- 关于autofac的一些具体的用法
简介:Autofac是一个.net下非常优秀,性能非常好的IOC容器(.net下效率最高的容器) 1.nuget 引用 2.创建两个类库项目,IService (用于编写接口),ServiceImpl ...
- JAVA反射机制及理解
JAVA反射 往往当我们面对一项新的知识时,我们往往需要知道三个方面,它是什么,它能做什么,它比原有知识强在哪里,我们该怎么使用它.当你能够解决这些问题时,便意味着你已经对这项知识入门了. 首先: 反 ...
- shell脚本报错:syntax error: unexpected end of file
解决办法1: vi test.sh :set fileformat=unix :wq 解决办法2: yum install dos2unix dos2unix my.sh 原因剖析: DOS下文件和L ...
- encode和decode区别
在python2 中是这种,编解码格式.在python3 中编码是会转换成byte类型即只显示ASCII码里的,编码会将byte转换成字符串类型.因此在py3中不需要使用,如果想要特定编码,在文件开头 ...
- 在C#中GUID生成的四种格式
var uuid = Guid.NewGuid().ToString(); // 9af7f46a-ea52-4aa3-b8c3-9fd484c2af12 var uuidN = Guid.NewGu ...
- Nginx 配置文件优化
user www www; #用户&组 worker_processes auto; #通常是CPU核的数量存储数据的硬盘数量及负载模式,不确定时将其设置为可用的CPU内核数(设置为“auto ...
- 使用Redux DevTools浏览器插件调试redux
与redux的Devtools模块不同,该工具主要依赖浏览器插件完成.模式也比Devtools简单点. step1 下载插件 Chrome地址(360极速模式也可以用): https://chrome ...
- C# 弹出确定、取消窗口
if (MessageBox.Show("确定要退出吗?", "", MessageBoxButtons.OKCancel, MessageBoxIcon.Qu ...
- Javascript基础语法(三)
数组 1.什么是数组 有许多变量,它们的名称和数据类型都是一致的. 2. 数组声明 var arr = [元素,元素,元素...]; var arr = new Array(元素,元素,元素...); ...
- 1.字符串操作:& 2.英文词频统计预处理
1.字符串操作: 解析身份证号:生日.性别.出生地等. ID = input('请输入十八位身份证号码: ') if len(ID) == 18: print("你的身份证号码是 " ...