css层叠样式优先级总结
虽然学前端最刚开始就是html+css,一直因为这些看起来太简单就没有什么总结,不过看似很简单的东西,研究起来也深不可测,问起来js可能回答的头头是道,css这么简单的东西,其中一个优先级的问题就能难道大片人,知道有哪些css选择器,大部分人都能回答出常用常见的几个id选择器,类选择器,标签选择器,伪类选择器等,但应该大部分人都答不全。所以本篇打算总结一下css的选择器和其优先级。
优先级是如何计算的?
1. 优先级就是分配给指定的css声明一个权重。
2. 当优先级相等的时候,最后的那个声明将会被应用到元素上
<p>111</p> <!--红色-->
/* 就像这样,优先级相同,最终显示的颜色是红色,应用到元素上的是最后一个 */
p{color:blue;}
p{color:red;}
3. 当同一个元素有多个声明时,优先级才有意义。优先级高的会覆盖优先级低的样式。
css有哪些选择器?
下面优先级依次递减
除此之外,优先级:!important > 内联样式 > 外部样式
通过一个例子感受下,不常用的几个选择符(+、>、~),遵循上面的原则
<!DOCTYPE html>
<html>
<head>
<title>css优先级</title>
<style type="text/css">
div>p{color: blue;}/*子元素选择器--选择class为myclass下的所有子元素p元素*/
h1+p{color: red;}/*兄弟元素选择器--选择和h1的所有兄弟元素p元素*/
.myclass h1~p{color: yellow;}/*兄弟元素选择器--选择h1后面所有的p元素*/
</style>
</head>
<body>
<div class="myclass">
<p>1111</p><!-- 蓝色 -->
<h1>1111</h1>
<p>1111</p><!-- 红色 -->
<p>1111</p><!-- 蓝色 -->
<div>
<p>1111</p><!-- 蓝色 -->
<h1>1111</h1>
<p>1111</p><!-- 红色 -->
<p>1111</p><!-- 蓝色 -->
</div>
<div class="myclass">
<p>1111</p><!-- 蓝色 -->
<h1>1111</h1>
<p>1111</p><!-- 黄色 -->
<p>1111</p><!-- 黄色 -->
</div>
</div>
</body>
</html>
参考:https://developer.mozilla.org/zh-CN/docs/Web/CSS/Specificity
css层叠样式优先级总结的更多相关文章
- css层叠规则,优先级算法
前言 层叠样式表CSS最基本的一个特性就是层叠.冲突的声明通过层叠进行排序,由此确定最终的文档表示.而这个过程的核心就是选择器及其相关声明的特殊性.重要性.来源及继承机制.本文将详细介绍CSS层叠 特 ...
- 层叠样式优先级CSS
按照W3School网站(点这里直达)的说法,当同一个 HTML 元素被不止一个样式定义时,它们是有优先级之分的,如下,将优先级从小到大排列出来,其中4的优先级最高: 1.浏览器缺省设置2.外部样式表 ...
- css层叠样式初学
一.css简介 1.层叠样式表:叠加效果,不同css对同一html修饰,冲突部分,优先级高作用,不冲突部分,共同作用 2.css作用 (1)修饰html (2)替代了标签自身的颜色,字号等属性,提高复 ...
- CSS 之 样式优先级机制
多重样式(Multiple Styles):如果外部样式.内部样式和内联样式同时应用于同一个元素,就是使多重样式的情况. 1.一般情况下,优先级从低到高,如下: 浏览器缺省(即浏览器默认) →(外部样 ...
- CSS层叠样式选择器归纳
常用选择器 1.1 类型选择器:用来寻找特定类型的元素 标签 { 声明 } p { color:black; } h1 { font-weight:bold; } 1.2 后代选择器: 选择一个元 ...
- CSS层叠样式
为了让网页元素的样式更加丰富,也为了让网页的内容和样式能拆分开,CSS由此思想而诞生,CSS是 Cascading Style Sheets 的首字母缩写,意思是层叠样式表.有了CSS,html中大部 ...
- 学习前端第二天之css层叠样式
一.设置样式公式 选择器 {属性:值:} 二.font 设置四大操作 font-size:字体大小 (以像素为单位) font-weight:字体粗细 font-family:字体 ( 可直接跟 ...
- css 选择器样式优先级
!important > 行内 >id > class >tag >*
- css样式权重优先级,css样式优先级
原文:http://www.bkjia.com/Javascri... 样式选择器权重优先级: important > 内嵌样式 > ID > 类 > 标签 | 伪类 | 属性 ...
随机推荐
- 在AD的环境下,更改计算机名导致TFS,无法连接解决办法
D:\vs2015>tf workspaces /collection:http://10.1.0.104:8080/tfs/dahua.adrms /updateComputerName:WI ...
- windows下WAMP php5.x redis扩展
其解压到php的扩展目录ext下,在php.ini文件中扩展部分增加一行:extension=php_redis.dll 新增下载地下: php5.3 http://download.csdn.net ...
- LINQ to Entities does not recognize the method 'Int32 ToInt32(System.String)' method, and this method cannot be translated into a store expression
if (!string.IsNullOrEmpty(FarmWorkId)) { data = data.Where(p => p.TypeId == Convert.ToInt32(FarmW ...
- MapWinGIS------下载与安装
最新版本下载地址: https://github.com/MapWindow/MapWinGIS/releases 1.下载后按步骤安装即可 2.右键以管理员身份运行cmd,运行:regsvr32 C ...
- jackson 转换 enum 类型
REST API 接口要求 requster json 的 lifeCycle 域只能填 YOUNG, OLD,对于其他的 lifeCycle,都要给 requester 返回 bad request ...
- SpringBoot(十三)-- 不同环境下读取不同配置
一.场景: 在开发过程中 会使用 开发的一套数据库,测试的时候 又会使用测试的数据库,生产环境中 又会切换到生产环境中.常用的方式是 注释掉一些配置,然后释放一下配置.SpringBoot提供了在不同 ...
- Cesium添加水面
var viewer = new Cesium.Viewer('cesiumContainer');var waterPrimitive = new Cesium.Primitive({ //show ...
- linux clamav杀毒软件的安装
一.概述 Linux比其它操作系统更稳定更安全.理论上Linux是有可能被病毒侵害的.但实际上 Linux机器几乎不可能遭受病毒的攻击.所以我这里的问题是为什么要为Linux准备防病毒软件,为了更好理 ...
- hadoop参数传递
传参关键代码: //从配置文件获取参数,必须在作业创建的前面 conf.addResource("hadoop-bigdata.xml"); keepUrl=conf.get(&q ...
- iOS AOP编程思想及实践
什么是 AOP Wikipedia 上的 AOP 定义: In computing, aspect-oriented programming (AOP) is a programming paradi ...