CSS选择器优先级与权重计算

最新推荐文章于 2022-12-14 20:19:33 发布
最新推荐文章于 2022-12-14 20:19:33 发布
阅读量206 收藏
点赞数
文章标签： css 伪对象选择器
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xin00guang/article/details/78875065
版权

CSS选择器优先级

1. 选择器优先级

  • !important > 内联 > id > class > tag > 继承;

2. CSS样式引入方法优先级

  • 内联式 > 内嵌式 > 链接式 > 导入式  
  • `<div style=""></div>`  >  `<head><style></style></head>`  >  `(<link>)` > `(import)`

3. 原则

  • 就近原则: 就近原则,同权重情况下样式定义最近者为准;
  • 覆盖原则: 权重一样,后面写的样式会覆盖前面的;
  • 继承原则: 文本系列样式可以继承，如font-size，line-height;
  • 优先级是根据二进制权重的大小进行比较的 , 权重大的会覆盖权重小的

参考: 

https://www.cnblogs.com/dq-Leung/p/4213375.html  CSS 选择器权重计算规则

http://www.nowamagic.net/csszone/css_SeletorPriorityRules.php   简明现代魔法

 

 

骑上北极熊去驰骋沙场吧
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
CSS选择器权重计算及优先级
04-16
介绍CSS中，单个选择器，以及复合选择器的权重计算规则，比如： .box #mydiv ul li.txt。通过计算选择器的权重，区别其优先级，判 断最终样式的覆盖效果。
关于CSS选择器优先级的判断题附结果截图
09-25
总结一下，CSS选择器优先级的计算对于确定元素的最终样式至关重要。在实际应用中，应尽量避免使用高优先级选择器来减少样式的冲突，提高代码的可读性和维护性。理解并熟练运用选择器优先级能够帮助开发者更有效地...
css选择器，优先级，权重计算
77今天也学习了的博客
05-12 169
参考 权重计算规则 第零等：!important， 大过了其它任何设置。 第一等：代表内联样式，如: style=””，权值为1000。 第二等：代表ID选择器，如：#content，权值为0100。 第三等：代表类，伪类和属性选择器，如.content，权值为0010。 第四等：代表标签选择器和伪元素选择器，如div p，权值为0001。 第五等：通配符、子选择器、相邻选择器等的。如*、>、+,权值为0000。 第六等：继承的样式没有权值。 计算规则： !important 和内联样式style都属
css 选择器 优先级 权重
JackLiu16的博客
09-01 206
参考： https://study.163.com/course/courseLearn.htm?courseId=1004165002#/learn/video?lessonId=1048127069&amp;courseId=1004165002
CSS 选择器权重计算与优先级
WangMin@汪末末
10-02 494
作者:WangMin 格言:努力做好自己喜欢的每一件事 CSDN原创文章 博客地址 ???? WangMin 在讲CSS 选择器权重计算与优先级之前，我们先来了解一下CSS是用来干什么的？CSS是用来通过添加样式使网页更加美观，也就是说CSS是利用选择器来美化网页的，使用户可以在网页上更清晰地找到自己需要的东西。 CSS添加样式的方式： 有内部样式（内部样式就是在html文件中通过标签来添加样式） 外联样式（通过标签将外部的样式css文件引入到html文件中） 还有行间样式，即在元素标签中通过styl
css选择器优先级权重计算规则
m0_46293001的博客
10-25 646
作用: 当多个选择器混合在一起使用时, 我们可以通过计算权重来判断谁的优先级最高 权重大小： 1、内联样式，如: style="..."，权值为1000。 2、ID选择器，如：#content，权值为0100。 3、类，伪类、属性选择器，如.content，权值为0010。 4、标签选择器、伪元素选择器，如div p，权值为0001。 5、通配符、复合选择器（+、>、~等）、否定伪类（：not）没有影响，权值为0000。 ​6、继承的样式没有权值 计算规则： 1、首先先计算选择器中有多少
CSS中选择器的权重值的计算
12-14
3. 外部样式：通过`<link>`标签链接到外部CSS文件中的样式，其权重同样取决于选择器。 接下来，我们来看选择器的权重计算规则： 1. ID选择器，如`#content`，权值为0100。 2. 类选择器、伪类和属性选择器，如`....
css选择器优先级深入理解
12-13
掌握CSS选择器优先级对于精确控制网页样式和解决样式冲突至关重要。在编写CSS时，应尽量避免使用!important，因为它降低了代码的可读性和可维护性。合理运用选择器和优先级，可以使CSS代码更加简洁高效。
CSS中选择器的优先级以及权重如何计算（前端面试题系列）
最新发布
hjp991028的博客
12-14 776
CSS中选择器的优先级以及权重如何计算（前端面试题系列）
选择器的优先级与css权重的计算方法
m0_37058714的博客
06-13 306
1.选择器的优先级ID选择器&gt;class选择器&gt;标签选择器2.css权重计算方法(有时套用的选择器过于繁琐，并不知道优先级的高低)记下各种选择器的数量值：style：1000；ID：100；class：10；标签：1；eg：  div  li a ：1+1+1=3  .box  li  a : 10+1+1=12   #box  li   a : 100+1+1=102...
CSS选择器的权重与优先规则分享
09-24
在CSS中，会根据选择器的特殊性来决定所定义的样式规则的次序，具有更特殊选择器的规则优先于具有一般选择器的规则，如果两个规则的特殊性相同，那么后定义的规则优先
CSS选择器权重与优先级
Dax1_的博客
03-20 1815
权重等级 优先级从低到高 继承，通配符(*)，权重为0 元素选择器，伪元素选择器，（如h1,::before），权重为1 类选择器，伪类选择器，属性选择器，（如.nav,:hoverr,[attribute]），权重为10 ID选择器，(如#nav)，权重为100 行内样式，(如style="")，权重为1000 !important 重要的，权重为无穷大 注意： 当权重相同时，采取就近原则，与元素距离近的选择器生效。 关于!important 一定要优先考虑使用样式规则的优先级来解决问题而不是 !i
CSS权重值计算和选择器优先级
lhxsirky的博客
10-21 325
一、权重的值计算以及选择器权重值大小 1、!important放在样式的最后面是最优先的，权重值是10000； 2、内联样式权重值1000，优先级仅次于！important，一般都是在标签内部书写，如：‘<div style="color:red;"></div>’ 3、id选择器权重值是100，如：#first； 4、类选择器、伪类选择器、属性选择器的权重值是10...
CSS权重叠加计算案例
Yous的博客
03-22 541
第一题 <head> <meta charset="utf-8"> <title>第1题：普通题</title> <style> /* (行内, id, 类, 标签) */ /* !important 最高 */ /* 继承: 最低 */ /* (0, 2, 0, 0) */ #father #son { color:blue; } /* (0, 1, 1, 1) */ #father p.c
css的优先级权重
DreamCloud714的博客
03-03 369
css的种类 style="color:red"行内样式 #div1{color:red}id选择器 .div1{color:red}类选择器 div{color:red}标签选择器 *{color:red}通用选择器 css的优先级 行内样式 > id选择器 > 类选择器 > 标签选择器 > 通用选择器 遇到复杂的css又该如何判断优先级 a{color: yellow...
css的优先性
Public places
07-19 281
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;style type="text/css"&gt; /*继承样式*/ div{ color:
CSS 选择器权重优先级计算规则
qq_17402947的博客
01-09 2870
原文地址：http://www.jianghuihui.vip/a/jishuwenzhang/HTML_CSS/20180109/34.html CSS有两大特性，继承性和层叠性  层叠性指的是：权重相同的情况下，后写的覆盖前面的样式。 由此可见，层叠性和选择器的权重有很大关系，今天就着重说一下选择器的权重  选择器有两大类： 基础选择器：id选择器，类选择器，
css层叠性，优先级问题
diligentkong的博客
01-10 1129
层叠性：就是css处理冲突的能力。层叠性是一种能力 层叠性的应用是 当多个选择器描述了同一个属性的时候，这个属性到底应该听谁的？ 先举个栗子：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css">
css选择器权重及其计算规则
想搞全栈的前端
04-23 1914
css选择器 文章目录css选择器选择器类型css选择器权重值权重计算方法案例 选择器类型 ID　　#id class　　.class 标签　　p 通用　　* 属性　　[type=“text”] 伪类　　：hover 伪元素　　::first-line 子选择器、相邻选择器 css选择器权重值 选择器 权重 !important 权重 !...
CSS选择器优先级与实战练习解析
练习部分则设计了不同级别的任务，帮助学习者逐步掌握这些概念，从理解到应用，提升对CSS选择器和样式的优先级的熟练度。例如，练习1关注五种选择器的使用，练习2强调样式优先级的理解，练习3和4涉及`display`和`...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

骑上北极熊去驰骋沙场吧

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值