首页 > 其他分享 >CSS选择器优先级(CSS三大特性:层叠性、继承性、优先级)

CSS选择器优先级(CSS三大特性:层叠性、继承性、优先级)

时间:2023-04-02 13:36:20浏览次数:47  
标签:层叠 权重 标签 优先级 选择器 CSS

本博文介绍CSS三大特性之一:优先级。

1 规则

(1)若选择器相同,则执行层叠性(层叠性:给相同的选择器设置相同的样式,则“后来居上”,后面设置的样式会覆盖前面设置的样式);

(2)若选择器不同,则有优先级。

2 选择器权重

常见的选择器权重如下表:

选择器 权重
继承或者*(通配符) 0,0,0,0
标签选择器 0,0,0,1
类选择器,伪类选择器 0,0,1,0
id选择器 0,1,0,0
行内样式(style="") 1,0,0,0
!important 无穷大

对选择器权重的说明如下:

(1)权重是由4组数字组成,没有进位

(2)比较权重大小:从左边第一个数字开始比较,直到第四个数字;

(3)继承的权重是0,如果该元素没有被直接选中,不管父元素权重多高,子元素得到的权重都是0;

(4)权重叠加:如果是复合选择器,则会有权重叠加,需要计算权重。权重叠加计算方法:将组成复合选择器的基础选择器的权重相加(4组数字分别相加),即得到新权重。

权重叠加示例:

选择器 权重 说明
div u li 0,0,0,3 3个标签选择器(0,0,0,1)
.nav ul li 0,0,1,2 1个类选择器(0,0,1,0)+2个标签选择器(0,0,0,1)
a:hover 0,0,1,1 1个标签选择器(0,0,0,1)+1个伪类选择器(0,0,1,0)
.nav a 0,0,1,1 1个类选择器(0,0,1,0)+1个标签选择器(0,0,0,1)

标签:层叠,权重,标签,优先级,选择器,CSS
From: https://www.cnblogs.com/detailNew/p/17280292.html

相关文章

  • 你不得不了解的CSS数据类型
    在我之前的开发中,CSS对于我来说,要用什么找什么,对CSS的了解并不算深入;在我刚开始深入学习CSS时,第一个遇到的就是CSS数据类型,我听说过JS、TS的数据类型,CSS怎么也有数据类型?但是随着我对CSS数据类型的了解,CSS的大门也在缓缓为我打开!!!什么是CSS数据类型?引用《CSS新世界》中的介绍:CS......
  • 文字下划线hover穿梭特效 - CSS
    Code:<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=d......
  • 车牌录入控件JS+CSS+JQuery
      HTML<divclass="carcodeBox"><divclass="carLicenseMain"><ul><li></li><li></li><li></li><li></li><li></li><li></li><li></l......
  • CSS
    盒子模型margin:外边距,即边框和其它盒子的距离,两个盒子之间取最大的margin值border:边框padding:内边距,即内容和边框的距离 ......
  • selenium使用css selector和xpath的比较
    selenium提供的定位方式(常用)推荐的定位方式的优先级   优先级最高:ID   优先级其次:name   优先级再次:CSSselector   优先级再次:Xpath针对cssselector和xpath的优先级做一个简单的说明在项目中我们可能用的最多的是css或者xpath,那么针对这两种,我们优先选择css,原......
  • 记录--CSS 如何实现羽化效果?
    这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助最近碰到这样一个问题,在一张封面上直接显示书名,可能会存在书名看不太清楚的情况(容易受到背景干扰),如下为了解决这个问题,设计师提了一个“究极”方案,将书名背后的图片模糊一下,这个在CSS中很好实现,仅需backdrop-fil......
  • Css导入方式
    CSS导入HTML有三种方式:1.内联样式:在标签内部使用style属性,属性值是css属性键值对<divstyle="color:blue">HelloCSS~</div>2.内部样式:定义<style>标签,在标签内部定义css样式<style>div{color:red;}</styl......
  • CSS简介
    CSS是一门语言,用于控制网页表现CSS(CascadingStyleSheet):层叠样式表W3C标准:网页主要由三部分组成结构HTML表现HTML行为JavaScript<!DOCTYPEhtml><htmllang="en"><heah><metacharset="UTF-8"><title>Title</title><st......
  • CSS菜鸟笔记
    最近想学习学习前端相关,先从基础吧;本文主要是在菜鸟笔记上的html教程中的笔记或者总结,主要给自己查询;参考链接:http://www.runoob.com/CSS简介CSS指层叠样式表(CascadingStyleSheets);样式定义如何显示HTML元素,通常存储在样式表中把样式添加到HTML4.0中,是为了解决内容与......
  • freeswitch媒体协商的优先级方案
      概述freeswitch是一款简单好用的VOIP开源软交换平台。不同的媒体格式各有优缺点,实际环境中的应用要根据线路和客户的实际需求确定。本文中介绍一种较为通用的媒体配置方案,可以适配大部分场景。环境centos:CentOS release7.0(Final)或以上版本freeswitch:v1.10.7GC......