一天搞定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 ...
随机推荐
- C#图解教程-方法参数笔记（上）
一晃大学四年要过去了,期间乱点了很多技能点, 导致每一项技能都只是处于入门阶段.为了将C#作为我的主要技能,准备恶补相关姿势(知识),通过各种技术论坛的推荐,找到了<C#图解教程>这本书. ...
- R语言写2048游戏
2048 是一款益智游戏,只需要用方向键让两两相同的数字碰撞就会诞生一个翻倍的数字,初始数字由 2 或者 4 构成,直到游戏界面全部被填满,游戏结束. 编程时并未查看原作者代码,不喜勿喷. 程序结构如 ...
- html 数字不转行问题
代码如下 <div style="width:20px;height:20px"> 111111111111111111111111111111111111111111 ...
- Why we don’t recommend using List<T> in public APIs
不推荐List<T>做API原因有如下两点:1.首先List<T> 设计之初就没有设计成可扩展的,我们不能重新其任何方法.这就意味着,我们操作List<T>的时候却 ...
- 【转】JDBC学习笔记(7)——事务的隔离级别&批量处理
转自:http://www.cnblogs.com/ysw-go/ 数据库事务的隔离级别 对于同时运行的多个事务, 当这些事务访问数据库中相同的数据时, 如果没有采取必要的隔离机制, 就会导致各种并发 ...
- 使用 Gradle 编译 Java 项目时报错: Could not find Tools.jar
在使用Android studio进行编译成jar的时候,遇到Gradle 编译错误,听前辈们说是jdk的版本不对,于是乎就更新了一下jdk, 然而可能是我重新安装jdk的时候改变了安装路径, 在pr ...
- Python 一行代码
Python语法十分便捷,通过几个简单例子了解其趣味 1.Fizz.Buzz问题为: 打印数字1到100, 3的倍数打印"Fizz", 5的倍数打印"Buzz" ...
- 初学Log4Net
1.Log4Net是什么? Log4Net是用来记录日志的,可以将程序运行过程中的信息输出到一些地方(文件.数据库.EventLog等) 2.Appender Appende ...
- bzoj3939 【USACO 2015 FEB GOLD 】cow hopscotch
Description 就像人类喜欢玩"跳房子"的游戏,农民约翰的奶牛已经发明了该游戏的一个变种自己玩.由于笨拙的动物体重近一吨打,牛跳房子几乎总是以灾难告终,但这是没有阻止奶牛几 ...
- 转-Tomcat 8 安装和配置、优化
https://github.com/judasn/Linux-Tutorial/blob/master/Tomcat-Install-And-Settings.md Tomcat 8 安装 Tomc ...