关于css里决定样式优先级的权重
最近学css样式，优先级有点繁琐，简单记录一下。
css中的优先级规则为：
- 有！important的最优先；
- 其次权重高的优先；
- 权重相同则后定义优先，会覆盖前面的。
至于权重：
- #id 为100；
- class类或伪类、属性选择器为10；
- 标签选择器为1
- 内联样式style= 为1000。
所以有上图的权重值。
至于继承，谁在body中更靠近p标签就用谁，若靠近程度一样，则继续用权重比较。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>权重</title>
<style>
#box1 .b p{
color: green;}
#box1 .b .c p{
color: red;}
#lyf p{
color: yellow;}
#box2 #box3 p{
color: darkblue;}
p{
color: darkorange !important;} #box2{
color: #123;}
#box1{
color: #789;}
</style>
</head>
<body>
<div id="box1" class="a">
<div id="box2" class="b">
<div id="box3" class="c">
<p id="lyf" class="d" >刘亦菲</p>
</div>
</div>
</div>
</body>
</html>
关于css里决定样式优先级的权重的更多相关文章
- css样式优先级和权重问题
内联样式: <div style="font-size: 12px;">姓名</div> 外部样式: <link rel="styleshe ...
- CSS样式优先级和权重问题（部分）
内联样式: <div style="font-size: 12px;">姓名</div> 外部样式: <link rel="styleshe ...
- css调试与样式优先级
如何查看一个标签的当前css样式 如上图所示 先用标签选择器选择某个标签 然后在elements区域就会自动找到该标签 然后在右侧的styles区域整个区域都是该标签的样式,从上到下是显示的优先级,被 ...
- 前端学习笔记——引入css文件、样式优先级
CSS样式的引用方式有三种:行间样式表>内部样式表>外部样式表. 如果只有一种样式,那么优先级“由内到外 由近到远” 1.行间样式表--内联方式 内联方式指的是直接在 HTML 标签中的 ...
- css学习之样式层级和权重
第一种情况 当选择器相同的情况下,引入方式的前后,决定页面最后的效果 ---------外部在最后面显示 ---------内部在最后面显示 第二种情况 引入方式相同时候,则是按照权重取最大(取权重最 ...
- CSS - 权重，样式优先级
关于CSS权重,一套计算公式来去计算,就是 CSS Specificity,我们称为CSS 特性或称非凡性,它是一个衡量CSS值优先级的一个标准. 遇到样式应用问题,计算一下权重就知道优先级. 具体规 ...
- css样式权重优先级，css样式优先级
原文:http://www.bkjia.com/Javascri... 样式选择器权重优先级: important > 内嵌样式 > ID > 类 > 标签 | 伪类 | 属性 ...
- CSS权重及样式优先级问题
CSS权重值计算 一条样式规则的整体权重值包含四个独立的部分:[A, B, C, D]; (1) A 表示内联样式(写在标签的style属性中),只有 1 或者 0 两个值:对于内联样式,由于没有选择 ...
- css中的继承、层叠、样式优先级机制
一.继承与层叠:
随机推荐
- C和C++从零开始系列(一)
今天开始写下一系列C和C++从入门开始的文章. 简单说几句C和C++的关系.C语言早于C++. C语言 贝尔实验室的Ken Thompson发明了 UNIX,当时有个B语言的.后来D.M.Ritchi ...
- ARTS-S mongo关闭与启动
关闭 mongo admin --eval "db.shutdownServer()" 删除dbdata目录下的mongo.lock 启动 /usr/bin/mongod --db ...
- ARTS-S golang单元测试
golang单元测试 在$GOPATH的src目录下建目录demo_unittest 在目录demo_unittest下建文件calc.go,内容如下: package demo_unittest f ...
- 【关注图像采集视频传输】之CYUSB3014 EZ-USB FX3 Software Development Kit
网址:http://www.cypress.com.与之前的High Speed FX2相比,新的产品叫Super Speed FX3,沿用了之前的命名习惯.FX2芯片内嵌一个8051核,FX3则内 ...
- SpringBoot+SpringDataJPA如何实现自定义查询[多表，多条件，分页，自定义sql封装]
举个例子:我们要在已经搭建好了的JPA环境下实现联合多表,多条件,多排序条件,分页查询一个表格数据,下面的表格 返回类MyJSON: public class MyJSON { private Str ...
- 【集合系列】- 深入浅出分析 ArrayDeque
一.摘要 在 jdk1.5 中,新增了 Queue 接口,代表一种队列集合的实现,咱们继续来聊聊 java 集合体系中的 Queue 接口. Queue 接口是由大名鼎鼎的 Doug Lea 创建,中 ...
- 【原创】这道Java基础题真的有坑！我也没想到还有续集。
前情回顾 自从我上次发了<这道Java基础题真的有坑!我求求你,认真思考后再回答.>这篇文章后.我通过这样的一个行文结构: 解析了小马哥出的这道题,让大家明白了这题的坑在哪里,这题背后隐藏 ...
- 关于EXIT和BADI增强的查找
EXIT出口的查找: 方法一: 第一步:通过SE30,输入TCODE(例如ME21N),执行EXCUTE,前台创建一张采购订单.点击TIMES页签,查找EXIT开头的SAP程序. 第二步:这些fun ...
- 基于XML的开发
基于XML的开发 1.定义一个切面类 /** * Created by zejian on 2017/2/20.*/ public class MyAspectXML { public void be ...
- JsonPath基本用法
JsonPath基本用法 本文主要介绍JsonPath的基本语法,并演示如何在Newtonsoft.Json中进行使用. JsonPath的来源 看它的名字你就能知道,这家伙和JSON文档有关系,正如 ...