一天搞定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++ 编译报错discards qualifiers [-fpermissive]
声明了一个类 class Card { public: Card(const string&); int m_value; char m_suit; private: const static ...
- file_get_contents HTTP request failed! Internal Server Error
使用file_get_contents报错 Severity: WarningMessage: file_get_contents(http://geetest.com:8000/select?gid ...
- lua 模块
lua 模块 概述 lua 模块类似于封装库 将相应功能封装为一个模块, 可以按照面向对象中的类定义去理解和使用 使用 模块文件示例程序 mod = {} mod.constant = "模 ...
- Lucene工作原理
Lucene是一个高性能的java全文检索工具包,它使用的是倒排文件索引结构.该结构及相应的生成算法如下: 0)设有两篇文章1和2 文章1的内容为:Tom lives in Guangzhou,I l ...
- Windows7系统的封装
系统装到虚拟机优化完成以后,可以装上自己想要装的软件,也可以不装做个纯净版的.今天用ES封装,首先打开一般我们只点这四项就够了,如下图 写上自己想写的,也可以不写系统默认,直接点“下一步”关闭设备管理 ...
- [ext4]08 磁盘布局 - CheckSums
从2012年开始,Ext4和jbd2的元数据中都开始加入checksums.特性标识是metadata_csum.Checksum算法是在super_block中指定: struct ext4_sup ...
- 基于JS的问卷调查
主要工作 因为代码不好展示,也不好截长图,可以去看我的GitHub地址:https://github.com/14glwu/MyBlog/blob/master/questionnaire.html ...
- 浅析如何在Nancy中生成API文档
前言 前后端分离,或许是现如今最为流行开发方式,包括UWP.Android和IOS这样的手机客户端都是需要调用后台的API来进行数据的交互. 但是这样对前端开发和APP开发就会面临这样一个问题:如何知 ...
- JAVA中令人疑惑的字符串
Java中不同的字符串存在于同一个存储池中,字符串变量将指向存储池中相应的位置,也就是字符串变量里面包含的并不是字符串而是这个字符串对象的内存地址. String a = "123" ...
- HTML+CSS－－position大法好
其实在HTML和CSS的学习中,css的position属性应该是难点之一,难在你需要静下心来仔细搞清楚它的每一个值的意义.效果和用法.但是它的功能很强大,效果也是很令人惊艳的,因为你可以用它去实现一 ...