一天搞定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 ...
随机推荐
- Android 开源优秀的项目
webrtc square/picasso Android 的一个强大的图像下载和缓存库 A powerful image downloading and caching library for A ...
- 【Tomcat源码学习】-3.应用管理
通过上一节我们完成了对容器进行了加载.初始化.启动,而对于应用的加载部分独立出来,本节进行单独的讲解 一.应用加载流程 1)应用识别,Context创建 在Host启动后,会调用Host的监听Ho ...
- 对百度WebUploader的二次封装,精简前端代码之图片预览上传(两句代码搞定上传)
前言 本篇文章上一篇: 对百度WebUploader开源上传控件的二次封装,精简前端代码(两句代码搞定上传) 此篇是在上面的基础上扩展出来专门上传图片的控件封装. 首先我们看看效果: 正文 使用方式同 ...
- DES/des3 加密程序
1 #ifndef POLARSSL_DES_H #define POLARSSL_DES_H #define DES_ENCRYPT 1 #define DES_DECRYPT 0 #define ...
- dispatch_group_t 日常使用注意事项
一.背景简介平时在进行多线程处理任务时,有时候希望多个任务之间存在着一种联系,希望在所有的任务执行完后做一些总结性处理.那么就可以将多个任务放在一个任务组中进行统一管理.dispatch提供了相应的A ...
- jdbc ,jdbcTemplate,MyBatis,Hibernate比较与分析
JDBC 1:jdbc(Java Data Base Connection 数据库连接)是一种用于执行sql语句的API,其中使用jdbc连接时需要的,Connection,Statement,Res ...
- 【Objective-C 基础】3.类
1.类 OC中类分为两个文件: .h类的声明文件,用于声明变量.函数. .m类的实现文件,用于实现.h中的函数 类的声明使用关键字@interface @end 类的实现使用关键字@implemen ...
- SpringMVC+Spring 事务无法回滚的问题
问题描述: Controller里面执行Service的方法,Service方法抛出异常,但是没有按照事务配置的方式回滚: Service的事务配置没有问题: 出现此问题的原因: 在springmvc ...
- 设计一个神经网络记住Or运算（日志一）
由于公式书写太过麻烦,所以上传设计的手稿过程,为如下:
- NSA永恒之蓝病毒，如何通过360工具修复？
简介: NSA武器库的公开被称为是网络世界"核弹危机",其中有十款影响Windows个人用户的黑客工具,包括永恒之蓝.永恒王者.永恒浪漫.永恒协作.翡翠纤维.古怪地鼠.爱斯基摩卷. ...