css常用的选择器及其权重

最新推荐文章于 2022-05-30 11:37:41 发布
最新推荐文章于 2022-05-30 11:37:41 发布
阅读量567 收藏
点赞数
分类专栏： CSS 文章标签： css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xiaotinghou/article/details/83030105
版权

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

CSS选择器

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

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

 

HUYOL
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS选择器权重计算及优先级
04-16
首先，我们要了解CSS选择器的四个等级及其对应权重： 1. **内联样式**（权重1000）：这是最高级别的权重，当直接在HTML元素中使用`style`属性定义样式时，例如`;">`。 2. **ID选择器**（权重100）：每个ID选择器如...
第20章 CSS定义选择器
04-10
此外，CSS还支持选择器权重的概念，每个选择器都有一个关联的权重值，用于解决样式冲突。权重由四个部分组成：内联样式（1000），ID选择器（100），类、属性和伪类（10），以及标签和伪元素（1）。更具体的选择器...
css常用选择器以及选择器的权重值介绍
weixin_42038883的博客
07-30 1243
一.选择器的权重值 选择器权重值比较： ！important infinity 无穷大 行间样式 1000 id 100 class|属性选择器|伪类 10 标签选择器|伪元素 1...
选择器及其权重
小森呀
08-10 253
* 通配符 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 4648
# 基本选择器 1. 元素选择器（Element Selector）：使用 HTML 元素的标签名作为选择器，选取匹配的元素。 eg：`p { }` 选取所有 `` 元素。 2. 类选择器（Class Selector）：使用类名选择元素，以 `.` 开头。 eg：`.highlight { }` 选取所有具有 `highlight` 类名的元素。 3. ID 选择器（ID Selector）：使用元素的唯一标识符 ID 选择元素，以 `#` 开头。 eg：`#myEleme
css中的选择器及其权重
TKOP_的博客
12-18 9977
总结复习css中的选择器部分的知识，巩固元素选择器、id选择器、类选择器、通配选择器、后代选择器、子代选择器、并集选择器、伪类选择器、结构伪类选择器和伪元素选择器的内容。并进一步明确他们的权重。.........
选择器的权重
xh888zw的博客
04-08 3548
继承性 概念:在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选择器分类汇总图片和文档
08-11
下面是对“CSS选择器分类汇总”相关知识点的详细说明。 1. 基本选择器： - **类型选择器**：例如`h1`，`p`，通过元素名称来选择元素。 - **ID选择器**：使用`#`后跟ID名称，如`#header`，每个页面中ID应是唯一的...
CSS-选择器1-概述
weixin_34336526的博客
06-09 186
CSS选择器-系列文章 选择器 例子 例子描述 CSS .class .intro 选择 class="intro" 的所有元素。 1 #id #firstname 选择 id="firstname" 的所有元素。 1 * * 选择所有元素。 2 element p 选择所有 p 元素。...
CSS 选择器的权重和关系
weixin_45256452的博客
05-30 99
1) 选择器权重: 1.important> id>类>标签>全局 # > . >view>* 最常用的是类选择器 2.同级选择器，后面的会覆盖前面的 3. 标签内的style比id,类等优先级高 2)选择器的关系 1.并列 .a,.b{} 选择器1，选择器2....{} 2.后代关系 .a .b{} 选择器1 选择器2...{} 3.子代关系 ...
截至目前最新的选择器以及权重
Double_Li_Wuang的博客
05-13 1474
css选择器大家庭及他们各自的权重综合（上）
css选择器 权重优先级,CSS选择器的权重与优先规则
weixin_28676289的博客
08-03 2018
一般而言，大多数前端工程师对css样式优先级的概念停留在如下所示： 注:>表示优先级的一个高低,|表示优先级一样!important>行间样式>id>class|属性>标签选择器>通配符但实际上，css是有一个权重的。且是可也计算的，我们在使用CSS对网页元素定义样式时经常会遇到这种情况：要对一般元素应用一般样式，然后在更特殊的元素上覆盖它们。那么我们怎么样来保...
几种基础的css选择器，以及他们之间的权重（优先级）
weixin_30249203的博客
12-06 224
-------------id选择器（1对1的关系，一个元素只能对应一个ID，同样的一个ID也只能对应一个元素）--------------- html： <div id="only"></div> css: #only{ 　　width:100px; 　　height:100px; 　　background-color:red; } ----------...
选择器权重
LJDbk的博客
03-02 1101
认识选择器 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 166
引入css 1.行间样式 //在标签头部加入属性style=" " 2.页面级CSS //在head里面写style标签 在标签里面写css 3.外部CSS文件 //在head里写个link单标签 引用css文件 CSS选择器 1.id选择器 //以#加上id值来定义{ }，一对一的特性 2.class选择器 //以 .加上id的值来定义{ }，特点多对多 ，可在class=“ ”以空格的形式引入...
CSS的常用类型和选择器权重的介绍
weixin_43749986的博客
11-26 134
css的使用方式 内嵌样式：写在style标签对里面。 行内样式：直接写在标签行上面。 外链样式：单独写一个css文件，通过link标签引入。 导入式：单独写一个css文件，通过@import导入。 css常用选择器 基础选择器：标签选择器、类选择器和ID选择器。 后代选择器 子选择器 伪类选择器 群组选择器 同级选择器 属性选择器 css选择器优先权重 当样式冲突时，将根据【权重+就近原...
CSS（六）
weixin_33895657的博客
05-15 107
CSS权重 CSS权重指的是样式的优先级，有两条或多条样式作用于一个元素，权重高的那条样式对元素起作用,权重相同的，后写的样式会覆盖前面写的样式。 权重的等级 可以把样式的应用方式分为几个等级，按照等级来计算权重 1、!important，加在样式属性值后，权重值为 100002、内联样式，如：style=””，权重值为10003、ID选择器，如：#content，权重值为1004、类，伪...
css标签选择器总结及权重
HertzDL的博客
07-04 1933
1.标签选择器 就是html代码中的标签，如 p{font-size:12px;line-height:1.6em;} 上面的css样式代码的作用：为p标签设置12px字号，行间距设置1.6em的样式。 2.类选择器 语法： .类选器名称{css样式代码;} 3.ID选择器 1、为标签设置id=“ID名称”，而不是class=“类名称”。 2、ID选择符的前面是井号（#）号，而不是英文圆点（.）...
CSS选择器优先级与实战练习解析
本资源详细介绍了五种选择器及其优先级，旨在帮助学习者理解和掌握CSS样式的应用。以下是这五种选择器的详细说明以及样式的优先级规则： 1. **基础选择器**： - `*` 通配符选择器：用于匹配任何元素，优先级最低。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值