css选择器权重及其计算规则_权重为1和权重为2哪个好-程序员宅基地

技术标签: 选择器  css  规则  HTML/CSS  权重  计算  

css选择器



选择器类型

  • ID  #id

  • class  .class

  • 标签  p

  • 通用  *

  • 属性  [type=“text”]

  • 伪类  :hover

  • 伪元素  ::first-line

  • 子选择器、相邻选择器

css选择器权重值

选择器 权重
!important 权重
!important Infinity(无限大)
行列样式 1000
Id选择器 0100
Class选择器/属性/伪类 0010
标签选择器 0001
*通配符选择器 0000 (大于默认样式与继承验样式)
继承样式 权重最小(比*通配符还小)

注意:选择器的权重值不是一个确定的值,例如标签选择器的权重值为1,但是这个1是一个256进制数,就是0到255后+1才是1。就是说权重值2和1中间差了255。这表示256个权重值为1的选择器加一起才抵得上一个权重为2的,这在后面权重计算有用。
还有需要注意的是,!important的权重值虽然是正无穷,但其实也是可也计算的,比如正无穷+1或者*1,就是要比正无穷大,在计算机中正无穷的值,都是一个有界的。不是数学上无界的一个慨念!


权重计算方法

一般而言,选择器越特殊,它的优先级越高。也就是选择器指向的越准确,它的优先级就越高。单一选择器直接比较权重,多个选择器则需要计算。
复杂的计算方法:

  • 用1表示派生选择器的优先级
  • 用10表示类选择器的优先级
  • 用100标示ID选择器的优先级
    • div.test1 .span var 优先级 1+10 +10 +1
    • span#xxx .songs li 优先级1+100 + 10 + 1
    • #xxx li 优先级 100 +1
案例

在这里插入图片描述在这里插入图片描述

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq_42068550/article/details/89364123

智能推荐

Vue 3D轮播插件vue-carousel-3d-程序员宅基地

文章浏览阅读9.5k次,点赞12次,收藏40次。效果图:安装npm install -S vue-carousel-3d引入在main.js全局引入:import Carousel3d from 'vue-carousel-3d';Vue.use(Carousel3d);使用<template> <div> <div class="box"> <carousel-3d> <slide v-for="(item, i) in sli._vue-carousel-3d

16行代码实现微信聊天机器人,自动智能回复(1)_vip1024c-程序员宅基地

文章浏览阅读919次,点赞16次,收藏7次。不知道你们用的什么环境,我一般都是用的Python3.6环境和pycharm解释器,没有软件,或者没有资料,没人解答问题,都可以免费领取(包括今天的代码),过几天我还会做个视频教程出来,有需要也可以领取~给大家准备的学习资料包括但不限于:Python 环境、pycharm编辑器/永久激活/翻译插件python 零基础视频教程Python 界面开发实战教程Python 爬虫实战教程Python 数据分析实战教程python 游戏开发实战教程Python 电子书100本。_vip1024c

【Oracle】Net Manager配置服务名_oracle net manager 配置数据库所在计算机的tcp/ip主机名在哪找-程序员宅基地

文章浏览阅读518次。一、第一步找到Net Manager,如图所示:二、第二步打开后找到中间的Oracle Net配置下有一个服务命名,鼠标点击“服务命名”后,点击左侧的绿色加号,如图所示 :三、第三步输入“网络服务名”,网络服务名是自己命名的,没有硬性限制,如图所示,然后点击下一步。四、第四步点击TCP/IP协议,如图所示,点击下一步。五、第五步输入主机名和端口号,主机名是指你需要连接的数据库所在的电脑的..._oracle net manager 配置数据库所在计算机的tcp/ip主机名在哪找

PAT1065 单身狗 (25分)(C语言)_pta单身狗c语言-程序员宅基地

文章浏览阅读615次,点赞2次,收藏2次。Sample Input311111 2222233333 4444455555 66666755555 44444 10000 88888 22222 11111 23333Sample Output510000 23333 44444 55555 88888思路:我打开这道题的时候是条单身狗,现在已经有一个可爱的、美丽的女朋友啦,希望每个快乐的程序员都有自己所爱..._pta单身狗c语言

数据挖掘作业5(个数据库有5个事务,如下表所示。设min_sup=60%,min_conf=80%)_数据库有5个事务,设minsup60% minconf80-程序员宅基地

文章浏览阅读4w次,点赞57次,收藏238次。5.7一个数据库有5个事务,如下表所示。设min_sup=60%,min_conf=80%。(1)分别用Apriori算法和FP-growth算法找出所有频繁项集,比较两种挖掘方法的效率。(2)比较穷举法和Apriori算法生成的候选项集的数量。(3)利用(1)所找出的频繁项集,生成所有的强关联规则和对应的支持度和置信度。![在这_数据库有5个事务,设minsup60% minconf80

安装软件包的三种方法;rpm包介绍、rpm工具的用法;yum工具用法、源码包安装_rpm安装rpm包-程序员宅基地

文章浏览阅读774次。安装软件包的三种方法 (安装与卸载) rpm工具 yum工具 (支持自动安装依赖的包) 源码包 安装源码包,需要我们把源代码编译成可执行的二进制文件 rpm包介绍挂载一下光驱看一下rpm包mount /dev/cdrom /mnt 挂在到/mnt下ls /Packages 查看一下里面的rpm包画圈的依次为:rpm包格式包名、版本号、发布版本号、平台 ..._rpm安装rpm包

随便推点

方程自己解(3)——deepXDE解Burgers方程_burgers方程求解-程序员宅基地

文章浏览阅读3.9k次,点赞10次,收藏34次。文章目录1. what‘s Burgers equation2. Solve Burgers equation by DeepXDE2. Burgers RAR4. summaryCite:【1】维基百科.伯格斯方程【2】DeepXDE.伯格斯方程求解1. what‘s Burgers equation2. Solve Burgers equation by DeepXDEBurgers equation:dudt+ududx=vd2udx2,  x∈[−1,1],  t∈[0,1](1)\_burgers方程求解

计算机毕业设计springboot疫苗预约系统149fx9[附源码]-程序员宅基地

文章浏览阅读31次。选题背景:随着全球疫情的爆发和蔓延,疫苗的预约和接种成为了当前最重要的任务之一。然而,传统的疫苗预约方式存在诸多问题,如人工排队、信息不透明、资源浪费等。因此,开发一个高效、智能的疫苗预约系统势在必行。选题意义:首先,疫苗预约系统可以提高预约效率。通过引入现代化的技术手段,如Spring Boot框架,可以实现在线预约、自动排队等功能,大大减少了人工操作的时间和精力消耗,提高了预约效率。其次,疫苗预约系统可以提供信息透明度。通过系统的建立,用户可以实时了解疫苗的供应情况、接种点的位置和时间等相关

tagwriter汉化版_【NFC TagWriter by NXP电脑版下载2020】NFC TagWriter by NXP PC端最新版「含模拟器」...-程序员宅基地

文章浏览阅读593次。NFC TagWriter by NXP电脑版介绍The NXP TagWriter APPlication stores contacts, bookmarks, geo location, Bluetooth Handover, SMS, Mail, text messages and many more to any NFC-enabled tags as well as to items ..._nfc reader tool windows

Java中的匿名内部类_java 匿名内部类-程序员宅基地

文章浏览阅读699次。定义:巴拉巴拉巴拉,就不写了。_java 匿名内部类

STM32系列ARM单片机介绍_单片机型号stm与df-程序员宅基地

文章浏览阅读330次。它们以高性能、低功耗和丰富的外设集成而闻名,为开发者提供了强大的功能和灵活性。在STM32系列单片机中,常见的型号包括STM32F0、STM32F1、STM32F2、STM32F3、STM32F4、STM32F7、STM32H7等。STM32F4系列:这是一款高性能的单片机系列,具有更高的时钟频率和更多的外设集成。STM32H7系列:这是一款高性能、高集成度的单片机系列,具有更高的时钟频率和更大的内存容量。该系列提供了较低的功耗和丰富的外设选项,可满足对成本和功耗敏感的应用需求。_单片机型号stm与df

Json常用注解_jsonignore注解-程序员宅基地

文章浏览阅读8.8k次,点赞3次,收藏23次。1、@JsonIgnoreProperties类别:类注解作用:json序列化时将bean中的一些属性忽略掉,序列化和反序列化都受影响内部可以写多个属性@JsonIgnoreProperties({"name"},{"age"})2、@JsonIgnore类别:属性或方法上的注解(最好是属性上)作用:用来完全忽略被注解的字段和方法对应的属性,序列化和反序列化都受影响@JsonIgnoreprivate int age;标记注释,指示基于内省的序列化和反序列化功能将忽略带注解的方法或字_jsonignore注解

推荐文章

热门文章

相关标签