css常用选择器，选择器的优先性

最新推荐文章于 2024-07-09 15:59:19 发布
最新推荐文章于 2024-07-09 15:59:19 发布
阅读量225 收藏
点赞数 1
分类专栏： css 文章标签： css css3 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/tjq11111/article/details/121300275
版权

个人理解:

1.通配符选择器(*)

2.元素名选择器

3.class选择器

4.id选择器

5.伪类选择器

id选择器的优先性>伪类选择器>class选择器>元素选择器>通配符选择器

在对一个元素设置同一个属性，但是不同值的时候，会优先执行优先性高的选择器中的属性，

若是优先级一样，则优先执行最下方的属性(哪个属性在最下端就先执行哪个)

外围前端吴彦祖
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css优先级 ：ID优先级＞class＞元素选择器
ysds20211402的博客
02-23 1855
转自：微点阅读https://www.weidianyuedu.com 在面试之前对css优先级的理解是 ：ID优先级>class>元素选择器，外联样式优先级低于内联样式，内联样式优先级低于行间样式，然后就没有然后了……，ID选择器的优先级确实>class选择器的优先级>元素选择器的优先级，但是外联样式优先级并不一定低于内联样式优先级。做为一个合格的前端工程师，让我们彻底搞清楚css优先级计算规则吧！ 特殊性 css继承是从一个元素向其后代元素传递属性值所采用的机制。确..
选择器的优先级和伪类的顺序
liaoxuewu的博客
09-20 1万+
1.选择器的优先级 （1）样式的继承 像儿子可以继承父亲的财产一样，在CSS中，祖先元素上的样式也会别后代元素所继承，利用继承可以将一些基本的样式设置给祖先元素，这样所有的后代元素将会继承这些样式。继承时对开发的一种简化，通过继承我们可以将元素共有的样式统一设置给祖先元素，这样就只需要设置一次，就给所有的元素设置了样式。 注：但是并不是所有的样式都会被子元素所继承，比如：背景相关的、边框相关的、定...
【前端面试之CSS】css选择器的分类优先级以及优先级的计算
阿卡内的博客
07-20 949
css选择器的分类优先级以及优先级的计算
61、CSS选择器及其优先级（伪元素、伪类选择器）
sunnnnh的博客
06-17 2542
1. CSS选择器及其优先级 选择器 格式 优先级权重 id选择器 #id 100 类选择器 .classname 10 属性选择器 a[ref=“eee”] 10 伪类选择器 li:last-child 或a:hover 10 标签选择器 div 1 伪元素选择器 li::after 1 相邻兄弟选择器 h1+p 0 子选择器 ul>li 0 后代选择器 li a 0 通配符选择...
Css选择器种类以及优先级
weixin_58498354的博客
04-01 2790
元素选择器 以标签名开头，选择所有span元素 /* 元素选择器 */ span { margin: 0; padding: 0; } id选择器 给标签取id名，以#加id名开头，具有唯一性，选择”id = ‘p1’”的元素 /* id选择器 */ #p1 { margin: 0; padding: 0; } 类选择器 给标签取class名，以点.加class名开头，选择所
css选择器的优先级
listStyleScript的博客
05-06 183
css的优先级 常用的选择器排序 !important>行内样式>#id>.class>标签(div,p…) 权重值详解 !important ！权重值无穷大,但也可以计算. 例如 div{ color:red !important; } body div{ color:red !important; /* 该权重值就大于上方*/ /* !importa...
选择器优先级和css的高级选择器
m0_64460142的博客
03-24 373
选择器：id选择器、类选择、元素选择器 id选择器：h1为名称，且前后相同 <style> #h1{ color:yellow; } </style> <body> <h1 id="h1">我是id选择器&l...
CSS选择器的权重与优先规则分享
09-24
总之，掌握CSS选择器的权重和优先规则对于编写高效且可维护的样式表至关重要。这不仅可以帮助开发者精确控制页面的样式，也能在解决样式问题时提供清晰的思路。在实践中不断练习和应用这些规则，将成为优化网页设计...
详解CSS中的选择器优先级顺序
09-24
了解并熟练运用CSS选择器优先级顺序，可以帮助开发者更精确地控制元素的样式，避免不必要的样式冲突，从而提高代码的可读性和维护性。在实际开发中，尽量减少对 `!important` 的依赖，因为它会使代码难以管理和调试...
驯服CSS选择器
12-01
《驯服CSS选择器》是由Nicole Sullivan撰写的一份PPT，主要探讨了优化CSS选择器以提升网页性能的关键策略。CSS文件的大小和HTTP请求数是影响CSS性能的两个核心因素，远比我们通常关注的回流(reflow)和渲染时间更重要...
CSS中选择器的权重值的计算
12-14
在CSS中，选择器的权重值是决定样式应用顺序的关键因素，它决定了哪种样式会被优先应用到HTML元素上。理解并掌握权重值的计算规则对于编写高效且无冲突的CSS至关重要。 首先，我们要明确CSS样式的三种类型及其对应...
CSS选择器学习攻略
09-24
理解并熟练掌握CSS选择器是创建高效、可维护的样式表的关键。以下是对CSS选择器的详细说明： 1. **基本选择器**： - `*` 通用元素选择器，用于选择页面上的所有元素。 - `E` 标签选择器，如`p`选择所有的段落元素...
css选择器优先级顺序是什么？css基本选择器优先级的介绍
weixin_48161032的博客
05-18 2687
css的选择器有很多种，那么，自然而然的就会有优先级这一概念出现，所以，css选择器优先级顺序是怎样的呢？本篇文章将来给大家介绍css选择器优先级的排序，话不多说，我们来直接看正文内容。 在看css选择器优先级顺序前，我们先来简单说说css基本选择器有哪些？ 1、标记选择器（如：body,div,p,ul,li） 2、id选择器（如：id=“name”,id=“name_txt”） 3、类选择器（如：id=“name”,id=“name_txt”） 4、后代选择器（如：#head .nav ul li 从父
css选择器的优先级，以及用法
热门推荐
hellow_tommer的博客
11-27 1万+
前言 本篇主要是css的选择器，及用法 总结 提示：这里对文章进行总结： 以上就是今天要分享的内容，如有错误，欢迎大家指出，我会及时修改的。 ...
【CSS笔记】CSS选择器的优先级（权重）
•一个写代码的•
08-20 2965
在CSS里面，如果有多个选择器作用在同一个元素上面，那么会按照上面的优先级顺序进行样式的选取，也就是优先级越高，浏览器最终就显示哪种样式。通过上面五个选择器的权重值，就可以计算出任意组合的权重值了，权重值就是将所有的权重相加。对于哪些组合选择器，我们可以通过计算选择器的权重来查看优先级，权重越大，优先级越高。
伪类 + 选择器优先级
weixin_30919429的博客
12-21 158
:link 匹配所有未被点击的链接；a:link{color:red} :visited 匹配所有被点击的链接；a:visited{color:red} :hover 匹配鼠标悬停其上的E元素 a:hover{text-decoration:underline} :active 匹配鼠标已经其上按下，还没有释放的E元素 a:active{color:purple} .box:ho...
CSS ＜a＞标签伪类选择器优先级
weixin_45195665的博客
08-30 604
id选择器 > class选择器 > 标签选择器 hover是伪类，优先级与class相同。 这四个伪类的优先级相同，前一个会覆盖后一个 a:link { color: black; }(未被点击时的) a:visited { color: blue; }(点击过后) a:hover { color: red; }(鼠标悬停时) a:active { color: green; }(点击时的) 伪类选择器通常放在.css文件末尾 ...
CSS之选择器的优先级问题
qq_34550459的博客
04-16 177
样式的冲突:当多个选择器对同一元素进行样式的控制 发生样式的冲突时,选择哪个样式是由选择器的优先级决定的 选择器的优先级:内联样式>id选择器>class选择器和伪类选择器>元素选择器 内联样式:1000 id选择器:100 class选择器和伪类选择器:110 元素选择器:1 注意:在比较优先级时,会对所有选择器的优先级进行累加计算,优先级越高,则优先显示 选择器的累加不会超过...
CSS【详解】层叠 z-index （含 z-index 的层叠规则，不同样式的层叠效果）
最新发布
朝阳39的博客
07-09 607
仅对已定位的元素（）有效，默认值为0，可以为负值。
css选择器权重！important
09-13
### 回答1： CSS选择器权重是用来确定当多个CSS规则应用于同一元素时，哪个规则将具有优先权的一种机制。其中，important是一种特殊的权重，它可以覆盖其他所有权重，使得该规则具有最高的优先级。但是，应该谨慎使用important，因为它可能会导致样式难以维护和修改。 ### 回答2： 在CSS中，选择器权重是用于确定样式优先级的一种机制。当多个样式规则应用到同一个元素时，通过权重机制可以确保样式的优先级。 权重由四个不同的组成部分组成，它们分别是： 1. !important：!important是最高优先级的标记，当一个样式规则被标记为!important时，它将覆盖其他所有的样式规则，无论其他规则的权重如何。 2. 内联样式：内联样式是直接应用于HTML元素上的样式，通过在元素的style属性中定义样式规则。它的优先级次于!important标记的规则。 3. ID选择器：ID选择器是通过HTML元素的id属性来定义的，而且是具有唯一性的。ID选择器的优先级高于内联样式。 4. 类选择器、伪类选择器和属性选择器：这些选择器通过HTML元素的class、伪类或属性来定义样式规则，它们的优先级低于ID选择器。 在权重比较中，如果两个或多个样式规则具有相同的权重，那么后面出现的规则将覆盖前面的规则。例如，如果一个样式规则使用了!important标记，那么无论其他规则的权重如何，它都将具有最高优先级。 总结起来，使用!important会覆盖其他所有规则，内联样式的优先级次于!important，ID选择器的优先级高于内联样式，而类选择器、伪类选择器和属性选择器的优先级低于ID选择器。 在实际应用中，尽量避免使用!important，以免造成样式优先级混乱。正确地组织和编写样式规则可以使得样式的优先级更加清晰和可维护。 ### 回答3： CSS中的选择器权重是用来决定样式的优先级的。它决定了当多个选择器同时应用到同一个元素时，哪个样式规则会被优先选择。 !important 是一种特殊的选择器权重，用于强制覆盖其他选择器的样式规则。当某个样式规则使用了 !important，它将拥有最高的优先级，其他选择器无论权重如何，都无法覆盖这个样式规则。 因为 !important 具有最高权重，所以它的使用应该谨慎。过度使用 !important 可能会导致样式失控，且很难维护和调试。应该尽量避免使用 !important，只在确实需要覆盖其他样式时才使用。 当多个选择器都使用了 !important，它们的优先级将依次由高到低决定。如果具有相同优先级的选择器同时使用了 !important，那么后面出现的样式规则会覆盖前面的样式规则。 除了 !important，CSS中还有其他选择器权重的规则。一般来说，选择器权重由以下规则决定：标签选择器 < 类选择器 < ID 选择器，同时还有内联样式的权重最高。当相同类型的选择器同时应用到元素时，权重高的样式规则将覆盖权重低的样式规则。 总之，选择器权重是用来决定样式规则优先级的。 !important 是一种特殊的选择器权重，用于强制覆盖其他选择器的样式规则。虽然有时候使用 !important 可以解决样式冲突的问题，但应该尽量避免过度使用，以免出现样式失控的情况。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值