CSS中各种选择器（ID、类等）的优先级

最新推荐文章于 2023-10-17 10:27:55 发布
最新推荐文章于 2023-10-17 10:27:55 发布
阅读量3.1k 收藏
点赞数 2
分类专栏： 学习总结 CSS 文章标签： html css class ID 选择器
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Summer_15/article/details/70216187
版权

按权重：

内联样式：权重+1000

ID选择器：权重+100

类、伪类和属性选择器：权重+10

选择器中的各个元素（即标签）和伪元素：权重+1

结合符合通配选择器：权重+0


CSS样式的表现取权重最大者。


-------《CSS权威指南》

Summer_15
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS语法、三种样式表及优先级、css选择器
weixin_43668201的博客
07-26 426
1.1、css简介 cascading style sheets 汉译:层叠样式表 WEB标准中的表现标准语言,表现标准语言在网页中主要对网页信息的显示进行控制，简单说就是如何修饰网页信息的显示样式 目前推荐遵循的是W3C发布的CSS3.0. 用来表现XHTML或者XML等样式文件的计算机语言。 1998年5月21日由w3C正式推出的css2.0 div+css的优点： 缩减页面代码，提高访...
CSS中的各种选择器与样式优先级小结
12-13
id选择器id="web",具有唯一性 伪类选择器CSS伪类（pseudo-class）是加在选择器后面的用来指定元素状态的关键字。 链接相关a:link 未访问的链接a:visited 已访问的链接a:hover 鼠标移动到链接上 a:active 选定的链接 ...
CSS中选择器（元素选择器，类选择器，id选择器）的优先级
weixin_51767880的博客
11-01 2046
前端人员在写静态页面时，不可避免的会遇到选择器的权重问题，下面做一些有关选择器权重问题的总结 一、选择器优先级先后顺序： id选择器>类选择器>元素选择器 二.、规则： 选择器的权重值表述为4个部分，用0,0,0,0表示。 通配符*的权重为0,0,0,0 标签选择器、伪元素选择器的权重为0,0,0,1 类选择器、属性选择器、伪类选择器的权重为 0,0,1,0 　　id选择器的权重为0,1,0,0 　　行内样式的权重为1,0,0,0 　　!imporatant的权重为∞ 权重大的选择器覆盖权重小的
类选择器和id选择器的优先级
12-30 4205
一般情况下，先使用类选择器 类选择器，可以支持多个使用，即一个元素可以包含多个类属性，在类属性的基础上再对元素实行特殊的操作的话，id选择器就显得很轻松了。
css选择器优先级
胖达cd的博客
07-28 724
CSS新手笔记 1.CSS的定义由三部分构成： 1.基本语法机构： 选择器{ 属性：值； } 2.三个值作用：. 选择器作用： 选中标签对其进行样式美化 属性作用：对元素进行哪些样式美化 值作用：决定属性美化样式的程度 注意：css中的属性与html元素行内属性不是一个东西 2.基本选择器 通配选择器 选择文档中所有HTML元素,例:*{ margin:10px} 元素选择器 选择指...
CSS中的各种选择器及优先级
qq_41883709的博客
03-12 681
css中的各种选择器 1.派生选择器 派生选择器允许你根据文档的上下文关系来确定某个标签的样式 <style> div p span{ color:blue; } </style> <div> <p>我是<span>行内元素&lt
CSS 选择器的优先级!important ,style,id,class,标签，后代选择器和子代选择器
PrimaryColor
12-31 9801
CSS选择器的优先级（从上至下，依次递减）： !important 行内样式style id选择器（#id） 类选择器（.className） 标签选择器（div,h1,p） 相邻选择器（h1+p） 子选择器（ul>li） 后代选择器（lia） 通配符选择器（*） 属性选择器（a[rel="external"]） 伪类选择器（a:hover,li:nth-child） ......
详解CSS中的选择器优先级顺序
09-24
了解并熟练运用CSS选择器优先级顺序，可以帮助开发者更精确地控制元素的样式，避免不必要的样式冲突，从而提高代码的可读性和维护性。在实际开发中，尽量减少对 `!important` 的依赖，因为它会使代码难以管理和调试...
详解CSS中的选择器优先级及样式层叠问题解决
01-21
新手的疑问大家经常在网页中看到类似 li#first 这样的选择器。很多新手疑问了？由于使用 id 就已经可以确定元素了，为什么前面还要加一个 li？ 直接写上 #first 这样的 id 选择器就可以了。听起来说得不错，简单...
关于CSS选择器优先级的判断题附结果截图
09-25
理解CSS选择器优先级是编写高效、可维护CSS代码的关键。以下是关于CSS选择器优先级的一些详细说明： 首先，CSS选择器的优先级由四个部分组成，每个部分对应一个权重值： 1. ID选择器（#id）：每个ID选择器的权重为...
CSS选择器优先级排列
weixin_33895475的博客
11-09 163
原文:CSS选择器优先级排列CSS选择器的效率从高到低做了一个排序： 1.id选择器（#myid） 2.类选择器（.myclassname） 3.标签选择器（div,h1,p） 4.相邻选择器（h1+p） 5.子选择器（ul < li） 6.后代选择器（li a） 7.通配符选择器（*） 8.属性选择器（a[rel="external"]） 9.伪类选择（a:hover,l...
【从零开始学习CSS | 第三篇】选择器优先级
fckbb的博客
07-14 3771
本文我们详细的介绍了选择器的优先级以及计算方式，在以后我们写大型前端项目的时候，就会频繁的调整选择器的优先级以此来达到我们需要的样式，因此我们一定要掌握好本章节
CSS选择器---这里只介绍常用的四大类（基本，关系，属性，伪类选择器）
qq_42488087的博客
08-01 821
CSS选择器：这里只介绍常用的四大类 【1.基本选择器】：通过例子更明白 ​ body里有如下标签 <body> <h1>111</h1> <h1 id = "qq">111</h1> <h1>111</h1> <h1>111</h1> <h2&...
CSS——样式使用、基本选择器、权值优先级
ShyuDai的博客
10-15 349
样式使用方法 /*css行内样式*/ &lt;p style="color: red;"&gt;css行内样式&lt;/p&gt; /*css内部样式*/ &lt;style type="text/css"&gt; h1{ color: blue; } &lt;/style&gt; &lt;body&gt; &lt;h1&gt;css内部样式&lt;/h1
css优先级浅谈 ：ID优先级＞class＞元素选择器
xinyuerr的博客
10-17 190
根据css优先级计算规则，伪类的特殊性值是0,0,1,0，4个伪类的特殊性值相同，那么后面声明的规则优先级高。实际上是因为选择器特殊性值是从左向右排序的，特殊性值1,0,0,0大于以0开头的所有特殊性值，即便它是0,99,99,99，优先级依然比1,0,0,0要低。important），加了权重的优先级最高，当权重相同的时候，会比较规则的特殊性，根据前面的优先级计算规则决定哪条规则起作用，当特殊性值也一样的时候，css规则会按顺序排序，后声明的规则优先级高，成为人生赢家，当上总经理出任CEO迎娶白富美。
CSS篇之4---样式的层级关系，选择器优先级，样式冲突，以及抽离样式模块怎么写，说出思路，有无实践经验...
abc20140818的博客
03-28 588
http://blog.csdn.net/zengyonglan/article/details/53337879 转载于:https://www.cnblogs.com/queende7/p/8666603.html
样式的层级关系，选择器优先级，样式冲突，以及抽离样式模块
TE杨
12-07 490
样式的层级关系 为了书写的美化，比如说ul 和li ，可以ul{}，li{}，也可以ul li{}，推荐使用后者 选择器优先级 ！important>id选择器>类选择器>标签选择器,样式遵循就近原则，遵循后载入原则 样式冲突 遵循上面 抽离样式模块 {padding: 0; margin: 0;}不建议使用，因为通配符要把所有的元素都遍历一遍，增加了浏览器的负载 body,...
前端常见面试题：层级样式关系，选择器优先级，样式冲突，抽离样式理解
lucky_girl_girl的博客
02-06 889
1.css样式层级关系： 可根据浏览器开发者工具去看样式层级关系 ！important可提高样式层级。 下面相同属性会覆盖上面相同属性，优先级低的覆盖优先级高的。 2.选择器优先级： id>class>html标签元素 3.样式冲突 当多种样式定义在同一个元素时，就会存在样式冲突。此时根据样式先后顺序和优先级进行选择。 4.抽离样式 相同样式抽取写在一个共通样式块中，不一样写在不同样式...
关于CSS选择器优先级无冲突样式设置的展示
aobi6343的博客
10-12 112
如果id和class都设置了同一样式,则显示id选择器的;如果id写的样式和class不冲突,则都会显示 .top{ border: 1px solid blueviolet; width: 438px; height: 50px; float: left; } #top{ ...
css中类选择器优先级
最新发布
07-07
在CSS中，类选择器的优先级通常仅次于ID选择器，但是它们的优先级高于元素标签选择器。当多个样式规则应用于同一元素时，类选择器的优先级计算如下： 1. **内联样式**：如果有直接在HTML元素上设置的style属性，它的优先级最高。 2. **ID选择器 ( #id )**：具有唯一标识符的选择器优先级次之，因为ID在整个文档中应该是唯一的。 3. **类选择器 ( .class ) 和属性选择器 ( [attr=value] )**：这两种类型的类选择器具有相同的优先级。当一个元素同时匹配多个这样的类时，会应用所有对应的样式，除非有明确的覆盖规则（如更具体的子类选择器）。 4. **标签选择器 ( element ) 和伪类/伪元素选择器 ( :hover, :active 等)**：一般类选择器的优先级高于这些通用选择器。 如果你有多层嵌套或者使用了后代选择器 ( > ) 或者相邻兄弟选择器 ( + ), 选择器组合的优先级可能会有所变化。例如，`.parent .child` 的优先级会低于 `.parent #child`。 总之，如果你想要改变某个类选择器的样式，需要确保你的新样式比已有的优先级高，或者明确地使用 `!important` 来强制覆盖原有规则。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值