CSS优先级别计算
a、b、c、d,可以以这四种等级为依据确定CSS选择器的优先级:
a-----style 行内样式 个数 +1000
b-----id 个数+100
c-----类 个数+10
d-----类型个数+1
!important 规则是例外,级别高于一切
选择器 | 特殊性(a,b,c,d) | 优先级 |
---|---|---|
style=" " | 1,0,0,0 | 1000 |
#wrapper #content{} | 0,2,0,0 | 200 |
#content .date{} | 0,1,1,0 | 110 |
div#content{} | 0,1,0,1 | 101 |
#content{} | 0,1,0,0 | 100 |
p.comment.date{} | 0,0,2,1 | 21 |
div.comment p{} | 0,0,1,2 | 12 |
.comment p{} | 0,0,1,1 | 11 |
p.comment{} | 0,0,1,1 | 11 |
.comment{} | 0,0,1,0 | 10 |
div p{} | 0,0,0,2 | 2 |
p{} | 0,0,0,1 | 1 |
练习下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>练习</title>
<style type="text/css">
.box a{color:000;}
</style>
</head> <body>
<div id="wrap">
<div class="box">
<p><a href="#">把这里改为红色</a></p>
</div>
</div>
</body>
</html>
把能想到的都发在评论里吧~
CSS优先级别计算的更多相关文章
- CSS网页布局错位:CSS宽度计算
为什么计算宽度计算网页像素宽度是为了CSS网页布局整齐与兼容.常见的我们布局左右结构网页或使用padding.margin布局的时候将计算整页宽度,如果不计算无论是宽度过大过小就会出现错位问题. 怎么 ...
- css优先级计算规则
原文:css优先级计算规则 最近面试了一些求职者,我问css优先级计算规则是怎样的?答曰ID优先级>class>元素选择器,外联样式优先级低于内联样式,内联样式优先级低于行间样式,然后就没 ...
- 关于CSS的优先级,CSS优先级计算
原则一: 继承不如指定原则二: #id > .class > 标签选择符原则三:越具体越强大原则四:标签#id >#id ; 标签.class > .class CSS优先级权 ...
- Vue 学习笔记 — css属性计算的问题
简书 今天在使用Vue时遇到一个问题:在切换css内联属性时某些特殊属性的计算会有问题,无法得到预期的结果. 例子: https://jsfiddle.net/blqw/cLwau40z/ 上面的页面 ...
- css优先级计算规则——权重
一.css的优先级 当对同一个元素设置相同的多个声明时,会按照优先级的高低选择应用哪种声明. <style> #id{ color:red; } p{ color:blue; } < ...
- 关于CSS的优先级,CSS优先级计算,多个class引用
原则一: 继承不如指定 原则二: #id > .class > 标签选择符 原则三:越具体越强大 原则四:标签#id >#id ; 标签.class > .class CSS优 ...
- js访问CSS最终计算样式
所谓计算样式,就是嵌入式样式.外部样式表.内联样式综合的样式表现,那么如何来获取呢? "DOM2 级样式"增强了document.defaultView,提供了getCompute ...
- css优先级计算
主要的css选择器有id,class,tag,[],:,::等,而通常需要对其优先级进行判断的有id,class,tag,另外内联样式和!important也和css的优先级有关系. 如果将这五种不同 ...
- css rem计算
先抛出一个问题:为什么要选择rem? px:像素是相对于显示器屏幕分辨率而言的相对长度单位.pc端使用px倒也无所谓,可是在移动端,因为手机分辨率种类颇多,不可能一个个去适配,这时px就显得非常无力, ...
随机推荐
- 数学+高精度 ZOJ 2313 Chinese Girls' Amusement
题目传送门 /* 杭电一题(ACM_steps 2.2.4)的升级版,使用到高精度: 这次不是简单的猜出来的了,求的是GCD (n, k) == 1 最大的k(1, n/2): 1. 若n是奇数,则k ...
- 转:.NET获取当前方法名或调用此方法的方法名
Introduction Before .NET, we were always looking for a way to log current method name in a log file ...
- Revit二次开发示例:HelloRevit
本示例实现Revit和Revit打开的文件的相关信息. #region Namespaces using System; using System.Collections.Generic; using ...
- ural 1243. Divorce of the Seven Dwarfs
1243. Divorce of the Seven Dwarfs Time limit: 1.0 secondMemory limit: 64 MB After the Snow White wit ...
- ZOJ 3494 (AC自动机+高精度数位DP)
题目链接: http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemCode=3494 题目大意:给定一些被禁止的BCD码.问指定范围内不含有 ...
- Codeforces Round #195 (Div. 2) D题Vasily the Bear and Beautiful Strings
这场CF,脑子乱死啊...C题,搞了很长时间,结束了,才想到怎么做.B题,没看,D题,今天看了一下,很不错的组合题. 如果n和m都挺多的时候 以下情况都是变为1,根据偶数个0,最后将会为1,奇数个0, ...
- CSS光标属性一览表
光标类型 CSS 把你的光标放到相应文字上查看效果 要注意光标的实际效果依赖于用户的系统设置,与你在这里看到的效果并不一定一致. 十字准心 cursor: crosshair; 手 cursor: p ...
- javascript大全
事件源对象 event.srcElement.tagName event.srcElement.type 捕获释放 event.srcElement.setCapture(); event.srcEl ...
- .NET Framework 4.5 的五大特性
介绍 从.NET4.5发布到现在已经有一年多了.但问题是针对最近微软发布的版本信息中,大部分的.NET开发人员所讨论交流的只是其中的一两个特性.其他的特性仅仅停留在MSDN中或者沦为简介文档.例如:现 ...
- 浅谈WPF页间导航
浅谈WPF页间导航 使用导航的目的是从一个页面进入到另一个页面.无论是预先决定的线性顺序(向导)还是基于层次的用户驱动程序(大部分网站的形式),或者动态生成的路径,主要有3种方法实现:调用Naviga ...