一天搞定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 ...
随机推荐
- file_get_contents HTTP request failed! Internal Server Error
使用file_get_contents报错 Severity: WarningMessage: file_get_contents(http://geetest.com:8000/select?gid ...
- php-fpm死机解决办法，脚本后台自动重启
本人用nginx+php7搭建了一台服务器,因为请求量太大,而且php里面又有挂起的任务,导致php-fpm在高峰期的时候经常死掉,吧php-fpm的最大进程数已经改到1000了,还是吃不消,cpu也 ...
- JTextArea自动换行以及设置滚动条
应将JTextArea置于JScrollPanel中若要使只有垂直滚动条而没有水平滚动条,使用JTextArea.setLineWrap(true),自动换行. 文本换行代码片段如下: JTextAr ...
- Haoop基本操作
一．HDFS的常用操作 (一).HDFS文件的权限 与Linux文件权限类似 r: read; w:write; x:execute,权限x对于文件忽略,对于文件夹表示是否允许访问其内容. 如果Lin ...
- js闭包绑定元素
闭包,官方对闭包的解释是:一个拥有许多变量和绑定了这些变量的环境的表达式(通常是一个函数),因而这些变量也是该表达式的一部分.闭包的特点: 1. 作为一个函数变量的一个引用,当函数返回时,其处于激活状 ...
- PHP获取指定页面的指定内容
在刚入手PHP的时候,经理让我自己做一个文章的管理系统为了方便管理微信端发的消息.除了简单的添加分类.管理分类.添加文章.管理文章,还有一个功能就是要从微信文章网址中拿到网址上的标题.作者以及发表时间 ...
- SQLServer中使用扩展事件获取Session级别的等待信息以及SQLServer 2016中Session级别等待信息的增强
本文出处:http://www.cnblogs.com/wy123/p/6835939.html 什么是等待 简单说明一下什么是等待:当应用程序对SQL Server发起一个Session请求的时候, ...
- Oracle之分组函数嵌套以及表连接
--1 数据环境准备 scott 用户下面的emp,dept表 --2 要求 :求平均工资最高的部门编号,部门名称,部门平均工资 select d.deptno,d.dname,e.salfrom(s ...
- Linux command not found 问题解释
执行可执行文件 执行文件就是具有可执行权限的文件,如果在文件所在目录上执行 ll 或 ls -l命令时,可能看到如下结果:-rwxr-xr-- 1 usr users 289 Jul 29 09:15 ...
- 我对RPC的理解
1.简介 这篇文章将会用最直白的方式介绍RPC,以及实现RPC客户端的Ajax跨域调用的例子. RPC(Remote Procedure Call Protocol)--远程过程调用协议,它是一种通过 ...