一天搞定CSS： CSS选择器优先级--08
选择器优先级：是指代码的执行顺序
通俗的说，就是多个选择器同时对一个标签分别添加样式，那么这个标签显示那个选择器设置的样式
1.优先级规则
2.规则1和2说明
优先级相同，谁后谁优先
优先级不同，优先级高的优先
代码演示
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
/*1.选择器的优先级一至的情况下，谁在后谁的优先级就高*/
/*div{
width: 100px;
height: 100px;
background: red;
}
div{
width: 100px;
height: 100px;
background: green;
}*/
/*2.选择器的优先级不一致的情况下，会选择优先级高的---这里class>div*/
.box{
width: 100px;
height: 100px;
background: red;
}
div{
width: 100px;
height: 100px;
background: green;
}
</style>
</head>
<body>
<!--
优先级 代码执行的顺序
选择器的优先级一致的情况下，谁在后谁的优先级就高
选择器的优先级不一致的情况下，会选择优先级高的
-->
<div class="box"></div>
</body>
</html>
3.规则3说明
行间>id>class>标签>通配符
代码演示
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
/*3.行间样式>id选择器>类选择器>标签选择器>通配符选择器（*）*/
body *{
height: 100px;
background: red;
}
div{
height: 100px;
background: green;
}
.div1{
height: 100px;
background: blue;
}
#box{
height: 100px;
background: yellow;
}
</style>
</head>
<body>
<!--
优先级 代码执行的顺序
行间样式>id选择器>类选择器>标签选择器>通配符选择器（*）
-->
<div id="box" class="div1" style="background: pink;"></div>
<!--<div id="box" class="div1"></div>-->
<!--<div class="div1"></div>-->
<!--<div></div>-->
</body>
</html>
4.规则4说明
包含选择器的优先级是一种累加的关系，加起来的值越大优先级就越高，值越小优先级就低
代码演示
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
/*4.包含选择器的优先级是一种累加的关系，加起来的值越大优先级就越高，值越小优先级就低*/
#div3{
height: 100px;
background: red;
}
/*10+100=110*/
.box2 #div3{
height: 100px;
background: green;
}
/*100+10=110*/
#div1 .box3{
height: 100px;
background: yellow;
}
/*100+10=110*/
#div2 .box3{
height: 100px;
background: blue;
}
/*100+1+1=102*/
#div1 div div{
height: 100px;
background: pink;
}
</style>
</head>
<body>
<!--
优先级 代码执行的顺序
包含选择器的优先级是一种累加的关系，加起来的值越大优先级就越高，值越小优先级就低
假设个选择器的值设置为：
行间样式 1000
id选择器 100
类选择器 10
标签选择器 1
-->
<div class="box1" id="div1">
<div class="box2" id="div2">
<div class="box3" id="div3"></div>
</div>
</div>
</body>
</html>
5.规则5说明
群组选择器的优先级取决于位置，谁靠后谁的优先级就高，会把前面的样式给覆盖了
代码演示
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
/*5.群组选择器的优先级取决于位置，谁靠后谁的优先级就高，会把前面的样式给覆盖了*/
div,p,h1{
width: 200px;
height: 100px;
background: red;
margin-top: 50px;
}
div{
background: green;
}
</style>
</head>
<body>
<!--
优先级 代码执行的顺序
群组选择器的优先级取决于位置，谁靠后谁的优先级就高，会把前面的样式给覆盖了
-->
<div></div>
<p></p>
<h1></h1>
</body>
</html>
一天搞定CSS： CSS选择器优先级--08的更多相关文章
- CSS中选择器优先级顺序实战讲解
原文:CSS中选择器优先级顺序实战讲解 我们有些程序猿在给一个元素(比如div)应用样式的时候,会有一些疑问,为什么我写在后面的样式不能覆盖前面的样式呢,不是说CSS是层叠样式表吗? 如果你在开发中也 ...
- CSS中选择器优先级的权重计算
CSS中选择器优先级的权重计算 先看一段代码,如下: a{ color: red; } #box a{ color: green; } [class="box"] a{ color ...
- 【CSS】选择器优先级
CSS的选择器优先级的权重 在 Selectors Level 3 规范中,一个选择器的优先级(权重)由依次串联的a.b.c三个标记来计算 a: ID选择器 如#header b: class选择器如 ...
- 【CSS系列-选择器优先级总结】
转:http://www.cnblogs.com/dolphinX/p/3511300.html 容易被忽略CSS特性 CSS初学感觉很简单,但随着学习的深入才感觉CSS的水由多深,平常总会遇到各 ...
- CSS样式选择器优先级
CSS样式选择器分为4个等级,a.b.c.d,可以以这四种等级为依据确定CSS选择器的优先级. 1.如果样式是行内样式(通过Style=””定义),那么a=12.b为ID选择器的总数3.c为Class ...
- CSS中选择器优先级与!important权重使用
CSS中的选择器优先级与!important权重使用 .class选择器要高于标签选择器. #id选择器要高于.class选择器. 标签选择器是优先级最低的选择器. !important的属性它的权重 ...
- 学习css之选择器优先级
相信每一位前端工作者最开始迷惑的地方便是界面展示为什么不符合预期效果呢,下面我来介绍一下可能引起上面结果的原因之一--css优先级. 我这里采用对照法来得出结论,代码如下: <style> ...
- 有关css的选择器优先级以及父子选择器
css,又称样式重叠表,如今的网页的样式基本是div+css写出来的,功能十分强大,要想在html文件中引入css文件需要在<head></head>标签内输入一行:<l ...
- 一小时搞定DIV+CSS布局-固定页面开度布局
本文讲解使用DIV+CSS布局最基本的内容,读完本文你讲会使用DIV+CSS进行简单的页面布局. 转载请标明:http://www.kwstu.com/ArticleView/divcss_20139 ...
随机推荐
- MTK elian（smartlink）在WIN32下的实现
先说明一下调试技巧:该程序需无线网卡实现功能,由于PC端有可能是多网卡的(有线网卡.无线网卡.虚拟网卡),所以在发包的时候数据包不一定会从无线网卡出,lib库应该也没处理多网卡的选择吧.所以在调试的时 ...
- 自动获取代理IP信息的例子，含代码，分享哦，
/// <summary> /// 读取URL数据内容 /// </summary> /// <param name="url">网址</ ...
- CPP--借助神器VS理解内存存储
之前也有想了解这些,第一个不是学底层的不知道从何理解,第二个上网搜概念,大牛们三言两语就结束了,举得例子也比较复杂,对于非C方向的可能有点吃力,所以一直没理解. 今天偶然发现原来还要内存窗口之说,就慢 ...
- 读书笔记之JavaScript中的数据类型(1)
JavaScript严格意义上分为ECMAScript.DOM.BOM.ECMAScript是一门真正意义上的语言,独立于浏览器,浏览器只是它的一个宿主环境.DOM(文档对象模型),为ECMAScri ...
- CSS表单属性
一般来说,表单在一个页面中是必不可少的,下面是我对表单的知识总结: 依次要说的是表单元素.表单属性.以及表单提交(js知识) 1,表单元素: <form action="提交的位置 / ...
- css 设置 checkbox复选框控件的对勾√样式
效果 最终的样式,想要的效果: 我们要创建方框中的对勾,对于这一点,我们可以使用:after伪类创建一个新的元素,为了实现这个样式,我们可以创建一个5px * 15px的长方形并给他加上边框. ...
- Quartz (二) 和Spring整合
先给个场景:每五分钟扫描并关闭7天未付款的订单 1.quartz pom.xml依赖 <dependencies> <dependency> <groupId>or ...
- C# Redis学习系列三：Redis配置主从
Redis配置主从 主IP :端口 192.168.0.103 6666 从IP:端口 192.168.0.108 3333 配置从库 (1)安装服务: redis-server ...
- JavaScript中的DOM函数与关键字汇总
DOM节点的属性 属性 描述 attributes数组 获取某个节点的所有属性子节点(实际是一个NodeList对象) childNodes数组 获取某个节点的所有子节点,可以按数组方式访问子节 ...
- 谈谈对Spring IOC的理解（转载）
学习过Spring框架的人一定都会听过Spring的IoC(控制反转) .DI(依赖注入)这两个概念,对于初学Spring的人来说,总觉得IoC .DI这两个概念是模糊不清的,是很难理解的,今天和大家 ...