css常用的选择器及其权重

最新推荐文章于 2024-10-11 10:57:15 发布

原创最新推荐文章于 2024-10-11 10:57:15 发布 · 612 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #前端

CSS 专栏收录该内容

5 篇文章

订阅专栏

本文详细介绍了CSS中各种选择器的权重计算方式，包括标签、类、ID选择器等，帮助读者理解样式覆盖规则。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

下面列出css中常用的几种选择器（不包括css3）

CSS选择器

选择器名称权重（及其计算方式）

标签选择器 1
类选择器 10
id选择器 100
通配符选择器 0<*<1
后代选择器相加之和
子级选择器相加之和
交集选择器相加之和
分组选择器独立计算，不会叠加
标签属性选择器 10
伪类选择器 10 :hover
伪元素 10 :after

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

HUYOL

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

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

04-16

首先，我们要了解CSS选择器的四个等级及其对应权重： 1. **内联样式**（权重1000）：这是最高级别的权重，当直接在HTML元素中使用`style`属性定义样式时，例如`;">`。 2. **ID选择器**（权重100）：每个ID选择器如...

深度解析：CSS选择器优化与页面性能提升策略

11-04

以下是一些关键的CSS选择器性能优化方法及其详细解释。首先，避免使用通配符选择器。通配符选择器（*）会匹配所有元素，造成浏览器在处理时需要遍历整个DOM树，尤其是在DOM结构复杂或CSS规则繁多的情况下，这会...

参与评论您还未登录，请先登录后发表或查看评论

css常用选择器以及选择器的权重值介绍

weixin_42038883的博客

07-30

1312

一.选择器的权重值 选择器权重值比较：！important infinity 无穷大行间样式 1000 id 100 class|属性选择器|伪类 10 标签选择器|伪元素 1...

选择器及其权重

小森呀

08-10

315

* 通配符 div 元素选择器 div,p - .box 类选择器 #box id选择器 div p 后代选择器 div>p 子代选择器 div+div 相邻兄弟选择器 属性选择器： E[att] 选取带有att属性的元素 E[att="val"] 选取带有att属性且值为val的元素 E[att~="val"] 选取带有att属性且值包含val词汇的元素 E[att|="val"]...

【CSS】CSS 选择器及其权重

Superman_H的博客

08-26

5233

# 基本选择器 1. 元素选择器（Element Selector）：使用 HTML 元素的标签名作为选择器，选取匹配的元素。 eg：`p { }` 选取所有 `` 元素。 2. 类选择器（Class Selector）：使用类名选择元素，以 `.` 开头。 eg：`.highlight { }` 选取所有具有 `highlight` 类名的元素。 3. ID 选择器（ID Selector）：使用元素的唯一标识符 ID 选择元素，以 `#` 开头。 eg：`#myEleme

css中的选择器及其权重

热门推荐

TKOP_的博客

12-18

1万+

总结复习css中的选择器部分的知识，巩固元素选择器、id选择器、类选择器、通配选择器、后代选择器、子代选择器、并集选择器、伪类选择器、结构伪类选择器和伪元素选择器的内容。并进一步明确他们的权重。.........

选择器的权重

xh888zw的博客

04-08

3674

继承性概念:在Css中，有一些属性，如果给父级元素设置了，那么它的后代元素都将继承这个属性。如: p、h3标签，可以从它的祖先元素中继承了文字的属性，没有继承盒子的属性。注:只有文字的属性能够继承，盒子的属性不能继承。文字属性: color、 font 系列、line- 系列、text- 系列。盒子属性: background 系列、width、 height、 border 系列、浮动、定位等。通过控制台查看继承的属性: Elements 面板=> Style选项卡，即可查看继承的属

CSS中选择器的权重值的计算

12-14

3. 外部样式：通过`<link>`标签链接到外部CSS文件中的样式，其权重同样取决于选择器。接下来，我们来看选择器的权重计算规则： 1. ID选择器，如`#content`，权值为0100。 2. 类选择器、伪类和属性选择器，如`....

css选择器优先级深入理解

09-25

理解CSS选择器的优先级规则，对于控制页面布局和样式的具体表现至关重要。首先，需要明确的是CSS中存在基础选择器和组合选择器，以及属性选择器。基础选择器包括标签选择器、类选择器、id选择器和通用选择器。组合...

CSS-选择器1-概述

weixin_34336526的博客

06-09

230

CSS选择器-系列文章 选择器 例子例子描述 CSS .class .intro 选择 class="intro" 的所有元素。 1 #id #firstname 选择 id="firstname" 的所有元素。 1 * * 选择所有元素。 2 element p 选择所有 p 元素。...

CSS 选择器的权重和关系

weixin_45256452的博客

05-30

157

1) 选择器权重: 1.important> id>类>标签>全局 # > . >view>* 最常用的是类选择器 2.同级选择器，后面的会覆盖前面的 3. 标签内的style比id,类等优先级高 2)选择器的关系 1.并列 .a,.b{} 选择器1，选择器2....{} 2.后代关系 .a .b{} 选择器1 选择器2...{} 3.子代关系 ...

CSS篇二：其他选择器与权重/范围

weixin_63022858的博客

10-11

978

伪类选择的种类很多，通常都是以（E：）形式展现（E代表标签名称/标签id名/标签class名等），同样是在特殊场景下进行使用。商业项目的开发场景，所以其他类型选择器的使用频率也非常高，所以还是建议记住，避免某一场景下为难。，因为在实际应用中，选择器的包裹度还受到文档结构、样式表的顺序和特异性等因素的影响。：属性选择器顾名思义，针对标签/元素的属性进行筛选，然后指定样式，使用范围度较小。）：这不是选择器的一部分，但可以附加在任何样式的末尾，以使其权重高于其他所有非。，只是为了方便记忆，所以区分拿出。

截至目前最新的选择器以及权重

Double_Li_Wuang的博客

05-13

1578

css选择器大家庭及他们各自的权重综合（上）

css选择器 权重优先级,CSS选择器的权重与优先规则

weixin_28676289的博客

08-03

2096

一般而言，大多数前端工程师对css样式优先级的概念停留在如下所示：注:>表示优先级的一个高低,|表示优先级一样!important>行间样式>id>class|属性>标签选择器>通配符但实际上，css是有一个权重的。且是可也计算的，我们在使用CSS对网页元素定义样式时经常会遇到这种情况：要对一般元素应用一般样式，然后在更特殊的元素上覆盖它们。那么我们怎么样来保...

几种基础的css选择器，以及他们之间的权重（优先级）

weixin_30249203的博客

12-06

263

-------------id选择器（1对1的关系，一个元素只能对应一个ID，同样的一个ID也只能对应一个元素）--------------- html： <div id="only"></div> css: #only{ 　　width:100px; 　　height:100px; 　　background-color:red; } ----------...

选择器权重

LJDbk的博客

03-02

1158

认识选择器 1. 类型选择器 (a,div,p) 2. 类选择器(class) 语法：class="类名" .类名{属性：属性值;} 可以起多个名字。 id选择器语法：id="id名" #名字 {属性：属性值;} 注意：id只能起一个名字，可以作为锚点使用，相当于身份证。伪类选择器 1. a:link 超链接访问前样式 2. a:visited 超链接访问后样式 3. E:hover`当鼠标悬停显示的样式 4. E:active 鼠标按下显示的样式 E表示任何选择器. 通配.

css引入、css基础选择器、选择器权重

qq_42704284的博客

12-15

206

引入css 1.行间样式 //在标签头部加入属性style=" " 2.页面级CSS //在head里面写style标签在标签里面写css 3.外部CSS文件 //在head里写个link单标签引用css文件 CSS选择器 1.id选择器 //以#加上id值来定义{ }，一对一的特性 2.class选择器 //以 .加上id的值来定义{ }，特点多对多，可在class=“ ”以空格的形式引入...

css选择器及权重

qq_75069372的博客

07-16

1260

css选择器 权重

CSS的常用类型和选择器权重的介绍

weixin_43749986的博客

11-26

184

css的使用方式内嵌样式：写在style标签对里面。行内样式：直接写在标签行上面。外链样式：单独写一个css文件，通过link标签引入。导入式：单独写一个css文件，通过@import导入。 css常用选择器 基础选择器：标签选择器、类选择器和ID选择器。后代选择器 子选择器 伪类选择器 群组选择器 同级选择器 属性选择器 css选择器优先权重当样式冲突时，将根据【权重+就近原...

CSS常用选择器、优先级及常用属性