首页 > 其他分享 >CSS选择器的优先级和权重。

CSS选择器的优先级和权重。

时间:2023-06-14 11:04:24浏览次数:32  
标签:优先级 权重 元素 值为 选择器 CSS

定义:CSS选择器的优先级和权重是用来确定当多个选择器应用于同一个元素时,哪个选择器的规则将会生效。以下是CSS选择器优先级和权重的解释:

CSS选择器的优先级:

1.内联样式:应用于HTML元素内部的style属性,具有最高的优先级。如


2.ID选择器:通过元素的id属性选择元素,如#example,具有较高的优先级。如
3.类选择器(.class)、属性选择器([attribute="value"])、伪类选择器(:hover),优先级较低于ID选择器。
4.元素选择器(如div,p)和伪元素选择器(如::before),优先级较低于类选择器和属性选择器。
5.通用选择器(*)、子选择器(>)、相邻兄弟选择器(+),选择器的优先级相对较低。
6.继承样式:某些属性会被父元素继承到子元素,但它们的优先级最低,可以被其他选择器所覆盖。

CSS选择器的权重:
当多个选择器具有相同的优先级时,可以通过以下规则确定选择器的权重,权重越高的规则将覆盖权重较低的规则:

1.内联样式的权重为最高,权重值为1000。
2.每个ID选择器的权重值为100。
3.每个类选择器、属性选择器和伪类选择器的权重值为10。
4.每个元素选择器和伪元素选择器的权重值为1。
5.通用选择器、子选择器和相邻兄弟选择器的权重值为0。
6.若选择器包含了!important规则,则其权重值为无穷大,将覆盖其他所有规则。

总结:当多个选择器应用于同一个元素时,具有较高权重的选择器的样式规则将会生效。如果权重相同,则遵循"后来居上"的原则,后定义的样式会覆盖先定义的样式。

标签:优先级,权重,元素,值为,选择器,CSS
From: https://www.cnblogs.com/yaotuo/p/17479560.html

相关文章

  • css如何实现文字两端对齐效果
    想要实现文字两端对齐效果,可以使用CSS的text-align属性。设置text-align:justify;即可实现文字两端对齐效果。一、方法一给元素设置 text-align: justify;text-align-last:justify;并且加上text-justify:distribute-all-line;目的是兼容ie浏览器p{width:130px;text-al......
  • CSS常用属性
    颜色RGB(红,绿,蓝)三种颜色的集合,最低值是0(十六进制00)到最高值255(十六进制FF)HSLH色相(0-360),S饱和度(百分比),L亮度(百分比)(不)透明度rgba、hsla(新版浏览器可不写a,直接写4个值)line-height行间距(letter-spacing字母间间距,word-spacing单词间距)值描述normal默认。......
  • 工作记录_mysql_AND优先级高于OR优先级
    1.错误示例SELECT t.task_department_name, COUNT(*)total_count, SUM(CASEWHENstatus='done'THEN1ELSE0END)ASfinish_count, SUM(CASEWHENstatus<>'done'THEN1ELSE0END)ASunfinish_countFROM`t_task`t--WHEREtask_typ......
  • vue 报错 !!vue-style-loader!css-loader?{“sourceMap“:true}!.
    npmrundev报错Thesedependencieswerenotfound:*!!vue-style-loader!css-loader?{"sourceMap":true}!../../node_modules/vue-loader/lib/style-compiler/index?{"vue":true,"id":"data-v-858b20d4","scoped":true,......
  • vue时间选择器 nut-datepicker
    vue时间选择器https://blog.csdn.net/Marshall_Ma/article/details/1242444511、年-月-日时:分效果展示:打开选择器:<divclass="label">记录日期:</div><nut-cell:showIcon="true":isLink="true"@click.native="switchPicker"......
  • css实现向上滚动动画
    <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"/><metahttp-equiv="X-UA-Compatible"content="IE=edge"/><metaname="viewport"content="w......
  • antd 5.0 定制主题如此酷炫,我决定开启 @ant-design/cssinjs 阅读之旅
    前言antd5.0正式发布已经有一段时间了,发布当天,一心二用的看完直播。很喜欢整个设计,有种简约快乐工作的感觉,某些功能设计初衷也给了我一些启发。antd5.0提供的主题定制挺酷炫的,加之我最近对「CSS-in-JS」很感兴趣。于是迫不及待的打开了它的源码,准备研究一番。我大部分情况下都......
  • 前端-CSS生成器
    按钮https://uiverse.io/buttons有好看的button、卡片、输入框等https://markodenic.com/tools/buttons-generator/玻璃态https://hype4.academy/tools/glassmorphism-generator调色板https://mycolor.space/滚动条https://scrollbar.jason-liang.com/......
  • CSS(精灵图、字体图标、三角、用户界面样式、vertical-align、溢出省略号、常用布局技
    一.精灵图(重点)1.1为什么需要精灵图一个网页中往往会应用很多小的背景图像作为修饰,当网页中的图像过多时,服务器就会频繁地接收和发送请求图片,造成服务器请求压力过大,这将大大降低页面的加载速度。为什么使用精灵图(目的):·为了有效地减少服务器接收和发送请求的次数,提高......
  • 你不知道的 CSS 居中方案
    水平居中内联元素要使内联元素(如链接,span或img)居中,使用text-align:center足够了。<divclass="desk"><spanclass="plate"></span></div>.desk{text-align:center;} 对于多个内联元素,也可以使用text-align:center:<divclass="desk">......