13 CSS样式权重问题
<!--
权重问题整体说明:
1.权重的意义:判定CSS属性的优先级高低,也就是说判定那个CSS的属性优先显示,将其他的低优先级的CSS样式覆盖掉。
2.如何判断权重:数选择器的数量,按照Id选择器、类选择器、标签选择器进行展示(注意:不进位),结果大的优先级高,
如:id选择器的个数为5,类选择器为8,标签选择器为6,则该样式的权重为586,如果另一个样式的权重为468,则第一个
样式的权重大,优先展示第一个CSS样式
3.权重的原则
(1)前提是选中标签,看权重,权重大的优先级要高,如果权重一样大,后面会覆盖掉前面的属性
(2)继承来属性 它们的权重为0,跟选中的标签没有可比性
(3)同是继承来的,谁描述的越近,谁的优先级要高."就近(选中标签)原则"
(4)同是继承来的,谁描述的一样近,再回到数权重的状态 -->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>权重问题</title>
<style>
/* 112 选择器的数量 id class 标签选择器 */
#wrap div .box3 p{
color: red;
}
/* 031 选择器的数量 id class 标签选择器 */
.box .box2 .box3 p{
color: green;
}
/* 201 选择器的数量 id class 标签选择器 */
#wrap #wrap2 p{
color: deeppink;
}
/* 201 > 112 > 031,所以字体显示显示为deeppink */
</style>
</head>
<body>
<div class="box" id="wrap">
<div class="box2" id="wrap2">
<div class="box3" id="wrap3">
<p>马玉刚</p>
</div>
</div>
</div>
</body>
</html>
13 CSS样式权重问题的更多相关文章
- CSS特异性(CSS Specificity)的细节之CSS样式权重的计算与理解(CSS样式覆盖规则)
本篇讲解CSS特异性(CSS Specificity)的细节,也就是CSS样式选择器的权重计算 通过计算选择器的权重(weight)最终决定哪个选择器将获得优先权去覆盖其他选择器的样式设定,即“优先原 ...
- CSS样式权重的级联cascade的概念
我们知道,firefox在众多浏览器中是对css 2高度兼容的一款浏览器,那是我能够编写一个中型b2b网站的时候(并不能说是我遇到过的难题)在禅意花园中看到的一个案例,说的是某个菜单在css中定义了以 ...
- css样式权重优先级,css样式优先级
原文:http://www.bkjia.com/Javascri... 样式选择器权重优先级: important > 内嵌样式 > ID > 类 > 标签 | 伪类 | 属性 ...
- 权重和层叠规则决定了CSS样式优先级
一.基本的优先级规则 比较同一级别的个数,数量多的优先级高,如果相同即比较下一级别的个数,至于各级别的优先级如下: important > 内联 > ID > 类 > 标签 | ...
- 前端极易被误导的css选择器权重计算及css内联样式的妙用技巧
记得大学时候,专业课的网页设计书籍里面讲过css选择器权重的计算:id是100,class是10,html标签是5等等,然后全部加起来的和进行比较... 我只想说:真是误人子弟,害人不浅! 最近,在前 ...
- 从webkit内核简单看css样式和css规则优先级(权重)
目录 webkit中样式相关类及类间关系 样式规则匹配 权重(优先级)计算 权重相同时的覆盖原则 webkit中样式相关类及类间关系 资料来源: <webkit技术内幕> 结构相关类: 1 ...
- CSS样式的引入&区别&权重&CSS层叠性&CSS样式的来源
CSS样式的引入: 内部样式: 内部样式:写在当前页面style标签中的样式 内联样式:写在style属性中的样式 外部样式: link标签引入的CSS文件 @import引入的CSS文件,需要写在c ...
- CSS样式表继承详解
最近在恶补css样式表的基础知识.上次研究了css样式表之冲突问题详解 .这次是对 css 继承 特性的学习. 什么是css 继承?要想了解css样式表的继承,我们先从文档树(HTML DOM)开始. ...
- 从零开始学习html(七)CSS样式基本知识
一.内联式css样式,直接写在现有的HTML标签中 <!DOCTYPE HTML> <html> <head> <meta http-equiv=" ...
随机推荐
- NFS Server搭建实践
NFS 是Network File System的缩写,即网络文件系统.一种使用于分散式文件系统的协定,由Sun公司开发,于1984年向外公布.功能是通过网络让不同的机器.不同的操作系统能够彼此分享个 ...
- 2.RabbitMQ的quick start
1.首先要安装 RabbitMQ Client 2.创建一个控制台项目 取名 Publisher代码如下: using RabbitMQ.Client; using System; using Sys ...
- 对偶空间(dual linear space)
1. 定义 设 V 为定义在数域 F 上的向量空间,定义 V 上的线性函数是从 V 到 F 的映射:f:V→F,且满足 ∀x,y∈V,k∈F 有:f(x+y)=f(x)+f(y),f(ka)=kf(a ...
- Windows下安装MySQL(解压版本)
解压缩 将下载到的文件解压缩到自己喜欢的位置,例如我自己的位置是D:\Program Files\mysql-5.7.10-winx64 添加环境变量 右键计算机->属性->高级系统设置- ...
- 简明Python3教程 18.下一步是什么
如果你有认真通读本书之前的内容并且实践其中包含的大量例程,那么你现在一定可以熟练使用python了. 同时你可能也编写了一些程序用于验证python特性并提高你的python技能.如果还没有这样做的话 ...
- SecureCRT循环检查设备状态
1: #$language = "VBScript" 2: #$interface = "1.0" 3: 4: ' This automatically gen ...
- HDU5187 zhx's contest(计数问题)
主题链接: http://acm.hdu.edu.cn/showproblem.php?pid=5187 题意: 从1~n,有多少种排列 使得 a1~ai 满足单调递增或者单调递减. ai~an 满足 ...
- 用 theano 求解 Logistic Regression (SGD 优化算法)
1. model 这里待求解的是一个 binary logistic regression,它是一个分类模型,参数是权值矩阵 W 和偏置向量 b.该模型所要估计的是概率 P(Y=1|x),简记为 p, ...
- 开源库(要不要重新制造轮子)—— C/C++、Java、Python
谷歌近期开源的SLAM方案:Cartographer Boost:准标准的C++库. Eigen3: 准标准的线性代数库. Lua:非常轻量的脚本语言,主要用来做Configuration Ceres ...
- MySQL 执行原生sql
public class MySqlHelper { private YourContext _context; public MySqlHelper(YourContext context) { _ ...