web前端进阶_CSS中选择器优先级比较_基础篇4

最新推荐文章于 2023-04-01 11:47:41 发布
最新推荐文章于 2023-04-01 11:47:41 发布
阅读量217 收藏
点赞数
文章标签： css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_17495489/article/details/108012236
版权

CSS选择器优先级比较

1.选择器的优先级

权重值越大优先级越高。（无论权重是多少，内联样式表的优先级都是最高的）

选择器类别权重值
元素选择器，*1
类选择器2
id选择器4
群组选择器看每个独立的选择器的权重值分别是多少
后代、子代选择器所有被>或者空格隔开的选择器的权重之和
备注：后代选择器比较权重的时候：先比第一大的独立选择器谁大谁优先级高，如果第一大相同，就比第二天的选择器，以此类推...

2.选择器相关内容详见以下链接

文章的第二章节即为css语言中各种选择器的介绍

苏格尼塞
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
css选择器优先级
牛東
07-18 682
css选择器优先级不得不讲算是css中的一个难点，前面看了许多人的文章，想来自己也来总结下。 根据前面我写过的css选择器总结一文,css选择器实际上就其本身对于元素的选择可以分为: 1.元素选择器(id,class,元素,*) 2.属性选择器 3.伪类 4.伪元素 注:关系选择器是将上面四种连接到一起，故可不予讨论。 我们用4位abcd为这4种选择器定义优先级: 按照由高到低
web前端入门知识：1-3
qq_50147784的博客
03-12 1223
一.基本选择器标签选择器:是指用html标签名称作为选择器，按照标签名称分类，为页面中某一标签指定统一的css样式优点：能快速为页面中同类型的标签统一样式缺点：不能设计差异化样式类选择器:使用“.”进行标识，后面紧跟类名，标签调用的时候用class="类名"即可可以为元素对象定义单独或相同的样式，可以选择一个或多个标签ID选择器：使用“#”进行标识，后面紧跟ID名，标签调用的时候用id="id名"即可元素的id值是唯一的，只能应对于文档中某一个具体的元素通配符选择器。
web前端css学习笔记(3)——伪类选择器、选择器优先级
m0_52353966的博客
04-01 943
本节学习伪类、伪类选择器。本节接上一节，学习了最后的伪类选择器和伪元素选择器。选择器优先级有自己的计算方式，从左往右计算。
Web前端，CSS不同选择器的优先级、 CSS权重叠加计算
星辰迷上大海的博客
04-30 1087
CSS权重优先级相关知识了解
Web前端第二季(CSS):三:109-选择器的优先级+110-其他三种选择器+111-伪类选择器+112-其他伪类
qq_40544338的博客
11-05 464
一.目的 1.想：学习前端知识 2.想：记录笔记，下次不用看视频，直接看笔记就可以快速回忆。 二.参考 1.我自己代码的GitHub网址 ​​​​​GitHub - xzy506670541/WebTest: SIKI学院的Web前端 1.SIKI学院:我参考此视频实操 Web前端第二季（CSS） - SiKi学院 - 生命不息，学习不止！ 我参考此视频实操 1.w3school官网:当做字典使用 w3school 在线教程 1.菜鸟教程：当做字典使用 菜鸟...
css核心基础总结篇(推荐)
01-19
就是同个元素在使用不同的选择器选择中后添加相同的样式。 优先级规则可以表述为 行内样式>ID样式>类别样式>标记样式 在复杂的页面中，某一个元素有可能会从很多地方获取样式，例如一个网站的某一 级标题整体设置为...
PHP和MySQL Web开发第4版pdf以及源码
10-13
16.5.4 Web应用的商业主机服务 16.6 数据库服务器的安全性 16.6.1 用户和权限系统 16.6.2发送数据至服务器 16.6.3 连接服务器 16.6.4 运行服务器 16.7 保护网络 16.7.1 安装防火墙 16.7.2使用隔离区域（DMZ） 16.7.3...
PHP和MySQL Web开发第4版
08-13
16.5.4 Web应用的商业主机服务 16.6 数据库服务器的安全性 16.6.1 用户和权限系统 16.6.2发送数据至服务器 16.6.3 连接服务器 16.6.4 运行服务器 16.7 保护网络 16.7.1 安装防火墙 16.7.2使用隔离区域（DMZ） 16.7.3...
PHP和MySQL WEB开发(第4版)
05-31
16.5.4 Web应用的商业主机服务 16.6 数据库服务器的安全性 16.6.1 用户和权限系统 16.6.2发送数据至服务器 16.6.3 连接服务器 16.6.4 运行服务器 16.7 保护网络 16.7.1 安装防火墙 16.7.2使用隔离区域（DMZ） 16.7.3...
精通CSS+DIV网页样式与布局全集
11-09
1.2.3　链接式　1.2.4　导入样式　1.2.5　各种方式的优先级问题　1.3　体验CSS　1.3.1　从零开始　1.3.2　加入CSS控制　1.3.3　控制图片　1.3.4　CSS的注释　第2章　CSS的基本语法　2.1　CSS选择器　2.1.1　标记选择...
web选择器优先级，字体，背景，边框，display，盒子
felix的博客
01-29 366
目录伪元素选择器选择器的优先级选择器优先级相同选择器不同导入方式(相同距离优先)不同选择器不遵循就近原则(优先级)字体相关高度(height)和宽度(width)字体大小(font-size)字重(font-weight)文本颜色文字属性文字对齐文字装饰首行缩进背景属性背景颜色背景图片显示指定图片位置以及居中显示边框属性css边框样式画圈圈⭕️：display属性块儿级变行内行内变块级让行内标签...
【JS Web 前端知识库】9.说一说样式优先级的规则是什么？
LIU_CAN的博客
02-01 331
说一说样式优先级的规则是什么？
css选择器的优先级，以及用法
热门推荐
hellow_tommer的博客
11-27 1万+
前言 本篇主要是css的选择器，及用法 总结 提示：这里对文章进行总结： 以上就是今天要分享的内容，如有错误，欢迎大家指出，我会及时修改的。 ...
css选择器—四大基本选择器
weixin_46124651的博客
02-21 6036
一、四大基本选择器 1、统配选择器（*）：匹配页面中的所有元素。 *{ } 例：页面中所有的元素都变成红色，背景是绿色 *{ color:red; background-color: darkseagreen; } 如图： ...
web前端-CSS-七类选择器和优先级
jinchenpeng的博客
05-27 803
通用选择器范围最广，优先级最低
web常用选择器的介绍以及选择器的优先级（小白版）
Caiabcd的博客
10-08 1703
在web编程的时候我们需要的必不可少的功能是选择器，选择器又分为多种，在这里选择常用的进行详细介绍(这里也是我最近的学习内容) <div> <span>你好</span> <p><span>你好</span></p> </div> <span>你好</sapn> 后代元素选择器 1）作用：选择指定元素的指定后代元素 2）语法：祖先元素 后代元素{} //注意祖先元素和后代元素之
CSS选择器优先级以及效率排名以及如何提高选择器效率来提升web前端性能
此博客停止维护和更新，已转移https://github.com/ilvseyinfu/blog
09-07 852
CSS 三大特性： 继承/优先级/叠层(后者会覆盖前者) 优先级排序：！important > 行内样式 > id选择器 > 类选择器 > 标签选择器 > 通配符 > 继承 > 浏览器默认 id选择器（#myid） 类选择器（.myclassname） 标签选择器（div,h1,p） 相邻选择器（h1+p） 子选择器（ul 后代选择器（li a） 通配符选择器（*
CSS选择器的优先级
风海生
06-19 2617
MDN上关于CSS选择器优先级的介绍 https://developer.mozilla.org/zh-CN/docs/Web/CSS/Specificity ID、class、元素 、属性 优先级排名为： ID[属性][伪类] ID[属性] --或-- ID[伪类]; 看声明顺序, 后声明的优先级更大 ID class[属性][伪类] 元素[属性][伪类] class[伪类] --或-- cl...
HTML中常见的选择器 的优先级
qingyisuo的博客
01-02 1万+
在HTML中常见选择器有： 行内选择器、标签选择器、id选择器、类选择器（class）行内选择器：通过style将样式直接写在标签里面： 格式为：style=“属性1:属性值1；属性2:属性值2；…” 例如：<p style=”color: red;font-size: 32px;”>啊啊啊啊</p> 注意：最后一个属性值后面的分号可以省略，其他的属性与属性之间必须要
css属性选择器优先级
最新发布
05-14
CSS选择器的优先级与其他选择器相同，是由其包含的选择器的数量和特殊性等因素决定的。具体来说，以下是影响CSS属性选择器优先级的因素： 1. 选择器中包含的ID选择器数量（#id） 2. 选择器中包含的类选择器、属性选择器和伪类选择器的数量（.class、[attr]、:hover等） 3. 选择器中包含的元素选择器和伪元素选择器的数量（element、::before、::after等） 4. 选择器中是否使用了通配符（*） 5. 选择器中是否使用了!important声明 总的来说，CSS属性选择器的优先级不算很高，如果与其他选择器混合使用，可能会被其他选择器覆盖。所以在使用CSS属性选择器时，最好考虑其他选择器的优先级，并根据需要使用!important声明来提高CSS属性选择器的优先级。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值