【CSS】CSS 选择器及其优先级

news/2024/4/17 10:57:24
  1. 元素选择器:选择特定的HTML元素。优先级较低。

    p {/* 样式规则 */
    }
    
  2. 类选择器:选择具有特定类名的元素。优先级稍高于元素选择器。

    .example {/* 样式规则 */
    }
    
  3. ID选择器:选择具有特定ID的唯一元素。优先级更高。

    #header {/* 样式规则 */
    }
    
  4. 属性选择器:选择具有特定属性的元素。优先级与元素选择器类似。

    [type="text"] {/* 样式规则 */
    }
    
  5. 伪类选择器:选择处于特定状态的元素,如链接的不同状态。优先级与元素选择器类似。

    a:hover {/* 样式规则 */
    }
    
  6. 伪元素选择器:选择元素的特定部分,例如元素的第一个字母或最后一个子元素。优先级与元素选择器类似。

    p::first-line {/* 样式规则 */
    }
    
  7. 组合选择器:结合多个选择器,以选择满足多个条件的元素。组合选择器的优先级由组成部分的选择器的优先级决定。

    p.example {/* 样式规则 */
    }
    

CSS选择器的优先级是由多个因素组合而成的,用于确定在多个样式规则应用到同一元素时哪个规则会生效。优先级从高到低分为四个等级,分别是:

  1. 内联样式(Inline Styles):应用于元素的内联样式,通过元素的style属性定义。内联样式具有最高的优先级。

    示例:

    <p style="color: blue;">这是内联样式的文本。</p>
    

    优先级:(1, 0, 0, 0)

  2. ID选择器(ID Selectors):通过元素的唯一ID选择元素。每个ID选择器在文档中只能出现一次。

    示例:

    #header {color: red;
    }
    

    优先级:(0, 1, 0, 0)

  3. 类选择器、属性选择器和伪类选择器(Class Selectors, Attribute Selectors, Pseudo-Class Selectors):包括类选择器(.class)、属性选择器([attribute])和伪类选择器(:pseudo-class)。

    示例:

    .example {color: green;
    }[type="text"] {border: 1px solid black;
    }a:hover {text-decoration: underline;
    }
    

    优先级:(0, 0, 1, 0)

  4. 元素选择器和伪元素选择器(Type Selectors, Pseudo-Element Selectors):包括元素选择器(element)和伪元素选择器(::pseudo-element)。

    示例:

    p {font-size: 16px;
    }p::first-line {font-weight: bold;
    }
    

    优先级:(0, 0, 0, 1)

如果有多个规则应用到同一元素,浏览器会根据这个优先级顺序决定应用哪个规则。如果多个规则具有相同的优先级,那么根据出现在样式表中的顺序来决定哪个规则应用。

需要注意的是,优先级是基于权重的计算,每个等级的权重分别为 (1000^3)(1000^2)10001。因此,尽管具体的选择器组合可能会很复杂,但优先级的计算是基于这种简单的权重规则。


http://www.ppmy.cn/news/1170116.html

相关文章

Android C/C++ native编程NDK开发中logcat的使用

Android C/C native编程NDK开发中logcat的使用 前言具体用法 前言 在NDK开发过程中&#xff0c;C/C层&#xff0c;需要对代码进行一些调试&#xff0c;日志打印是我们解决异常或崩溃的重要手段&#xff0c;这里我就简单介绍下日志打印三步走。 首先我们先看下官方文档关于日志…

ATX Power Supply

Pinout 20 PIN MOLEX 39-29-9202 at the motherboard 20 PIN MOLEX 39-01-2200 at the cable PinNameColorDescription13.3VOrange+3.3 VDC23.3VOrange+3.3 VDC3COMBlackGround45VRed+5 VDC

Redis | 在Java中操作Redis

在Java中操作Redis&#xff1a; 第一步: pom.xml文件中导入maven依赖第二步: 在application.yml配置文件中 配置Redis数据源第三步: 编写RedisConfiguration配置类&#xff0c;创建RedisTemplate对象第四步: 通过RedisTemplate对象操作Redis / Redis中的数据4.1 操作“字符串St…

聊聊分布式架构07-[Spring]IoC和AOP

目录 Spring IoC IoC的设计与实现 简单容器BeanFactory 高级容器ApplicationContext IoC容器工作过程 Spring AOP 简单的Spring AOP示例 Spring IoC IoC&#xff08;Inversion of Control&#xff09;&#xff1a; IoC是一种设计原则&#xff0c;它反转了传统的控制流。…

Linux 中监控磁盘分区使用情况的 10 个工具

在本文[1]中&#xff0c;我们将回顾一些可用于检查 Linux 中磁盘分区的 Linux 命令行实用程序。 监控存储设备的空间使用情况是系统管理员最重要的任务之一&#xff0c;它可以确保存储设备上有足够的可用空间&#xff0c;以维持 Linux 系统的高效运行。 1. fdisk fdisk 是一个强…

相似度loss汇总,pytorch code

用于约束图像生成&#xff0c;作为loss。 可梯度优化 pytorch structural similarity (SSIM) loss https://github.com/Po-Hsun-Su/pytorch-ssimhttps://github.com/harveyslash/Facial-Similarity-with-Siamese-Networks-in-Pytorch/blob/master/Siamese-networks-medium.ip…

C++类和对象(五) 拷贝构造函数

1 概念 在现实生活中&#xff0c;可能存在一个与你一样的自己&#xff0c;我们称其为双胞胎。那在创建对象时&#xff0c;可否创建一个与已存在对象一某一样的新对象呢&#xff1f; 那在创建对象时&#xff0c;可否创建一个与已存在对象一某一样的新对象呢&#xff1f; 拷贝构造…

系统设计 - 我们如何通俗的理解那些技术的运行原理 - 第五部分:支付系统

本心、输入输出、结果 文章目录 系统设计 - 我们如何通俗的理解那些技术的运行原理 - 第五部分&#xff1a;支付系统前言如何学习支付系统信用卡为什么被称为“银行最赚钱的产品”&#xff1f;VISA/万事达卡如何赚钱&#xff1f;步骤说明为什么开证行应该得到补偿 当我们在商家…

大模型、实时需求推动湖仓平台走向开放

大模型、实时需求高涨 AGI 时代&#xff0c;以 ChatGPT、Midjourney 等为代表的大模型迅速应用加速了 AI 普及&#xff0c;越来越多的企业选择搭建自己的 AI 基础设施&#xff0c;训练行业大模型。 另一方面&#xff0c;企业为了在瞬息万变的市场环境中更快的做出商业决策&…

Android之AMS原理分析

在学习android框架原理过程中&#xff0c;ams的原理非常重要&#xff0c;无论是在面试中还是在自己开发类库过程中都会接触到。 1 简述 ActivityManagerService是Android最核心的服务&#xff0c;负责管理四大组件的启动、切换、调度等工作。由于AMS的功能和重要性&#xff0c…

mybatis plus中json格式实战

1.pom.xml <?xml version"1.0" encoding"UTF-8"?> <project xmlns"http://maven.apache.org/POM/4.0.0" xmlns:xsi"http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation"http://maven.apache.org/POM/4.0…

YZ系列工具之YZ12:VBA_4种方法设计下拉列表

我给VBA下的定义&#xff1a;VBA是个人小型自动化处理的有效工具。利用好了&#xff0c;可以大大提高自己的工作效率&#xff0c;而且可以提高数据的准确度。我的教程一共九套一部VBA手册&#xff0c;教程分为初级、中级、高级三大部分。是对VBA的系统讲解&#xff0c;从简单的…

Ansible的debug模块和魔法变量介绍,fact变量采集和缓存相关操作演示

目录 一.debug模块的使用方法 1.帮助文档给出的示例 2.主要用到的参数 &#xff08;1&#xff09;msg&#xff1a;主要用这个参数来指定要输出的信息 &#xff08;2&#xff09;var&#xff1a;打印指定的变量&#xff0c;一般是通过register注册了的变量 &#xff08;3&…

如何利用示波器解析I2C数据

前言 &#xff08;1&#xff09;如果有嵌入式企业需要招聘校园大使&#xff0c;湖南区域的日常实习&#xff0c;任何区域的暑假Linux驱动实习岗位&#xff0c;可C站直接私聊&#xff0c;或者邮件&#xff1a;zhangyixu02gmail.com&#xff0c;此消息至2025年1月1日前均有效 &am…

2.3.C++项目:网络版五子棋对战之实用工具类模块的设计

文章目录 一、实用工具类模块&#xff08;一&#xff09;功能 二、设计和封装&#xff08;一&#xff09;日志宏封装&#xff08;二&#xff09;mysql_util封装&#xff08;三&#xff09;Jsoncpp-API封装&#xff08;四&#xff09;file_util封装&#xff08;五&#xff09;st…

CUDA编程- __syncthreads()函数

基本概念 __syncthreads() 是CUDA编程中非常关键的一个同步原语。它的功能是确保在某个线程块中的所有线程在执行到这个函数之前都已完成它们之前的所有指令。一旦所有线程都到达这个同步点&#xff0c;它们才可以继续执行__syncthreads()之后的指令。这个函数只能在设备代码&…

Docker数据管理、端口映射、容器互联

目录 一、Docker 的数据管理&#xff1a; 1&#xff0e;数据卷&#xff1a; 1.1 宿主机目录/var/www/html 挂载到容器中的/data1&#xff1a; 1.2 测试&#xff1a; 2&#xff0e;数据卷容器&#xff1a; 2.1 创建一个容器作为数据卷容器&#xff1a; 2.2 挂载a1容器中的数据卷…

K8s:Pod 中 command、args 与 Dockerfile 中 CMD、 ENTRYPOINT 的对应关系

写在前面 前几天被问到&#xff0c;这里整理笔记之前也没怎么注意这个问题理解不足小伙伴帮忙指正 曾以为老去是很遥远的事&#xff0c;突然发现年轻是很久以前的事了。时光好不经用&#xff0c;抬眼已是半生&#xff0c;所谓的中年危机&#xff0c;真正让人焦虑的不是孤单、不…

Kotlin中的函数分类(顶层、成员、局部、递归等)

在 Kotlin 中&#xff0c;函数可以按照不同的方式进行分类。在本篇博客中&#xff0c;我们将介绍以下几种常见的函数分类&#xff0c;并提供示例代码进行演示。 顶层函数&#xff1a; 顶层函数是指定义在文件中的函数&#xff0c;不依赖于任何类或对象。它们可以在文件的任何…

分布式锁 - 理论篇

一、为什么需要分布式锁 二、分布式锁实现 1.分布式锁演进 - 基本原理 我们可以同时去一个地方“占坑”&#xff0c;如果占到&#xff0c;就执行逻辑。否则就必须等待&#xff0c;直到释放锁。“占坑”可以去redis&#xff0c;可以去数据库&#xff0c;可以去任何大家都能访…
最新文章