首页 > 其他分享 >选择器的权重

选择器的权重

时间:2023-09-01 20:44:25浏览次数:35  
标签:10 权重 样式 Selectors 规则 选择器

在CSS中,选择器的权重是一个重要的概念,它决定了哪个样式规则应用于元素。选择器的权重是由一系列因素决定的,包括选择器的类型、选择器的复杂性以及样式规则的来源。

选择器的权重有以下规则:

  1. 内联样式(Inline Styles)的权重最高,为1000。例如:<div style="color: red;">
  2. ID选择器的权重次之,为100。例如:#uniqueID
  3. 类选择器(Class Selectors)、属性选择器(Attribute Selectors)和伪类(Pseudo-classes)的权重相同,为10。例如:.myClass[type="text"]:hover
  4. 类型选择器(Type Selectors)和伪元素(Pseudo-elements)的权重最低,为1。例如:div::before

如果多个选择器的权重相同,那么在CSS规则列表中的顺序决定了哪个规则被应用。后出现的规则会覆盖先出现的规则。

当一个元素有多个类时,类的权重计算方式是,对每一个类选择器分别计算权重,然后求和。例如,一个元素同时属于".class1"和".class2",那么它的类选择器的权重就是10 + 10 = 20。

请注意,使用!important标记可以改变上述权重的规则,但使用!important应该谨慎,因为它可能会导致样式冲突和难以调试的代码。

标签:10,权重,样式,Selectors,规则,选择器
From: https://www.cnblogs.com/hellohui/p/17672812.html

相关文章

  • 02 jQuery选择器
    02jQuery选择器jQuery的逻辑和css选择器的逻辑是一样的.//语法: $(选择器)可以使用jQuery选择器快速的对页面结构进行操作.案例:<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Title</title><scriptsrc=&quo......
  • vue-颜色选择器(vColorPicker)
      //安装插件//官网:http://vue-color-picker.rxshc.com/npminstallvcolorpicker-S//main.js中全局引入importvcolorpickerfrom'vcolorpicker'Vue.use(vcolorpicker)//在页面中使用<colorPickerv-model="color"v-on:change="he......
  • 列举出css所有的样式选择器
    以下是CSS中常见的各种样式选择器:1.元素选择器:通过HTML元素名称选择元素,如`p`、`div`等。2.类选择器(ClassSelector):通过`class`属性选择一个或多个具有相同类名的元素,如`.example`。3.ID选择器(IDSelector):通过`id`属性选择具有唯一标识符的元素,如`#uniqueID`。4.......
  • Nacos-服务实例的权重设置
       一般可以应用在版本升级这种需要停掉服务器的服务上......
  • element-ui 中 Cascader 级联选择器同时获取value值和label值
    给Cascader级联选择器添加一个别名 复制代码<el-cascader:options="options"ref="myCascader"></el-cascader>选择完毕之后可以通过别名获取 复制代码letlabelValue=this.$refs['myCascader'].inputValue当然,element-ui在一直更新变化,label值的字......
  • [转]vue中的css深度选择器 :deep(<inner-selector>)、/deep/、>>>、::v-deep 到底是什
    原文地址:vue中的css深度选择器:deep(<inner-selector>)、/deep/、>>>、::v-deep到底是什么?-掘金vue中的css深度选择器概念与作用当<style>标签有scoped属性时,它的CSS只作用于当前组件中的元素,父组件的样式将不会渗透到子组件。如果你希望scoped样式中的一个选......
  • 属性选择器
     作用: 选择属性中符合要求的元素 语法:  [属性名]:选择具有某个属性的元素[属性名="值"]:选择具有某个属性且属性值等于指定值的元素[属性名^="值"]:选择具有某个属性且属性值是指定值开头的元素[属性名$="值"]:选择具有某个属性且属性值是指定值结尾的元素......
  • 兄弟选择器
     作用:选中指定的元素后,符合条件的相邻兄弟或所有兄弟 语法: 第一种相邻兄弟选择器 选择器1+选择器2所谓相邻就是紧紧挨着的下一个,切记睡在我下铺的兄弟语法:第二种所有兄弟选择器选择器1~选择器2选中选择器后,选择符合条件的所有兄弟元素,切记睡在我下铺的所......
  • java Swing 有没有文件夹选择器?
    这两天做一个图形化软件需要选择文件并进行文件读取,因此需要使用到JAVASpring中的文件选择框。参考:https://blog.51cto.com/u_92655/6514099参考2:https://blog.csdn.net/shalimu/article/details/128145834如果要选择文件夹,则需要设置参数:......
  • 后代选择器
     作用:选中指定元素中,符合要求的后代元素 语法:  选择器1选择器2选择器3选择器n......多个选择器通过空格隔开,空格的意思可以理解为什么中的其实就是后代的意思 举例:/*ul中的li为红色*/ulli{color:red;} olli{color:gold;}/*ul中的.yuw......