html+css 选择器优先级

1.基本选择器优先级

id>class>tagname(标签选择器)>*(通配符选择器)

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>基本选择器的优先级</title><style type="text/css">#id3{color:yellow;}h3{color:red!important;}#id3{color:black;}.green{color:green;}</style>
</head>
<body><h3 class="green" id="id3">同时应用三种选择器所定义样式的h3标题文字</h3>
</body>
</html>

效果图

注:!important提高样式表的优先级(最高) 

2.多元素组合选择器的优先级

控制对象的精准度>id个数>class个数>tagname个数>后定义覆盖前定义

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>基本选择器的优先级</title><style type="text/css">*{margin:0;padding:0;}#wrap-1{width:600px;margin:20px auto;}li{list-style:none;}a{text-decoration:none;}#wrap-1 ul.list p #text-1{        /*两个id,一个class,两个tagname*/color:blue;}#wrap-1 .list #box-1 span{       /* 两个id,一个class,一个tagname*/color:red;font-size:30px;}span{color:green;}                 /*一个tagname*/</style>
</head>
<body><div class="wrap" id="wrap-1"><ul class="list"><li id="list-1"><p class="box" id="box-1"><span class="text" id="text-1">多元素组合选择器所影响最内层的文字</span></p></li></ul></div>
</body>
</html>

效果图

3.css书写顺序

(1)显示属性:display,list-style,position,float,clear

(2)自身属性:width,height,margin,padding,border,background

(3)字体和文本属性:font,color,text-align,vertical-align,text-indent

(4)css3中新增属性:content,box-shadow,border-radius,transform 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/4421.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

ShaderLab的混合命令

文章目录 示例原理混合因子混合操作参考 示例 Pass {Tags{"LightMode" "ForwardBase"}// 关闭深度写入ZWrite Off// 设置Pass的混合模式&#xff0c;SrcAlpha: 片元着色器产生的颜色的混合因子// OneMinusSrcAlpha 已经存在于颜色缓冲中的颜色的混合因子…

vue实现左右两栏布局宽度可拖拽

项目里需要左右两栏布局根据内容多少可以用户自己拖拽宽度的需求 找了文章参考了下&#xff0c;但都没有实现我要的效果&#xff0c;所以结合调整了一下&#xff0c;记录一下我自己用到的效果 参考文章放下面了&#xff0c;感谢两位大佬 vue拖拽 html实现拖拽 最终效果实现…

STM32 cubemx hal库huart串口接收不到第一帧数据或数据全为0的问题

存在问题的stm32工程是使用cubemx搭建stm32串口dma通讯的工程. 问题是&#xff1a; 每次上电后&#xff0c;串口接收第一帧数据全部都为0&#xff0c;第二帧及以后接收的数据都是正确。 原因是&#xff1a; 以下2行代码&#xff0c;放在void HAL_UART_MspInit(UART_HandleT…

easyExcel - 带图片导出

目录 前言一、情景介绍二、问题分析三、代码实现1. 单图片导出2. 多图片导出3. 多图片导出&#xff08;优化&#xff09; 前言 Java-easyExcel入门教程&#xff1a;https://blog.csdn.net/xhmico/article/details/134714025 之前有介绍过如何使用 easyExcel&#xff0c;以及写…

适用于芯片行业的开发及管理工具:版本控制、持续集成、代码分析及项目管理工具介绍

3月28日-29日&#xff0c;2024国际集成电路展览会暨研讨会&#xff08;IIC Shanghai&#xff09;在上海成功举行。此次盛会汇聚了集成电路产业的众多领军企业&#xff0c;共同探寻和把握集成电路产业的发展脉络。 龙智携芯片研发及管理解决方案亮相展会&#xff0c;展示如何通…

什么是外汇杠杆交易?

外汇杠杆交易是目前的外汇交易市场中&#xff0c;投资者进行外汇交易的重要方式&#xff0c;通过这样的交易方式&#xff0c;投资者就有机会进行以小搏大的交易&#xff0c;他们的交易就有可能会更成功&#xff0c;因此&#xff0c;投资者应该对这样的交易方式进行了解&#xf…

springboot 集成 activemq

文章目录 一&#xff1a;说明二&#xff1a;e-car项目配置1 引入activemq依赖2 application启动类配置消息监听3 application.yml配置4 MQConfig.java 配置类5 ecar 项目中的监听6 junit 发送消息 三&#xff1a;tcm-chatgpt项目配置5 MQListener.java 监听消息 三 测试启动act…

RV1126添加gc2093摄像头

前言 上篇讲的是双目摄像头GC2053摄像头进行拉流&#xff0c;本篇介绍下如何适配添加RGB Sensor GC2093并且可以在windows上成功拉取视频流 平台背景 开发板&#xff1a;易百纳开发板 cpu: rv1126 sensor: gc2093 200w像素 2lanes type&#xff1a;MIPI kernel: 4.19.111 sys…

K8S深度解析:从入门到精通的全方位指南

目录 一、Kubernetes简介 二、Kubernetes的核心作用 三、Kubernetes架构图例 四、Kubernetes核心概念 Harbor仓库概述&#xff1a; Master----管理组件&#xff1a; API Server&#xff08;集群之心&#xff09;&#xff1a; Scheduler&#xff08;调度大师&…

基于Transformer深度学习的翻译模型(英->中)源码系统

第一步&#xff1a;Transformer介绍 Transformer是一种基于注意力机制的序列到序列模型&#xff0c;它在机器翻译任务中表现出色并逐渐成为自然语言处理领域的主流模型。Transformer模型的核心思想是使用自注意力机制&#xff08;self-attention&#xff09;来捕捉输入序列中各…

Redis系列:内存淘汰策略

1 前言 通过前面的一些文章我们知道&#xff0c;Redis的各项能力是基于内存实现的&#xff0c;相对其他的持久化存储&#xff08;如MySQL、File等&#xff0c;数据持久化在磁盘上&#xff09;&#xff0c;性能会高很多&#xff0c;这也是高速缓存的一个优势。 但是问题来了&am…

如果通过Glide 设置图片圆角

要给图片设置一个圆角,通常方法是在ImageView 标签外添加一个CardView 标签,然后设置圆角值,但是今天遇到一个问题就是 RecyclerView Item 中这样操作的话会遇到这样的一个报错: Cannot call this method while RecyclerView is computing a layout or scrolling androidx.rec…

RLC防孤岛负载测试,你了解多少?

RLC防孤岛负载测试是一种用于检测并防止电力系统中出现孤岛现象的测试方法。孤岛现象是指在电网故障或停电的情况下&#xff0c;部分电网与主电网断开连接&#xff0c;形成一个独立的、不受控制的电力系统。这种情况下&#xff0c;如果不及时切断与孤岛的连接&#xff0c;可能会…

HarmonyOS 应用开发——入门

首先当然是华为的官方文档了&#xff0c;要认真学习: https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V2/start-overview-0000001478061421-V2 不想花时间看&#xff0c;可以看我下面总结的干货&#xff0c;哈哈 第一个问题&#xff1a;stage架构和fa架构的区…

GPU服务器和普通服务器有何区别?

众所周知&#xff0c;服务器是网络中的重要设备&#xff0c;要接受少至几十人、多至成千上万人的访问&#xff0c;因此对服务器具有大数据量的快速吞吐、超强的稳定性、长时间运行等严格要求。 GPU服务器和普通服务器的主要区别在于硬件配置和适用场景&#xff0c;特别是处理器…

应急行业的智能安全帽(高端)

前面介绍了低端、中端安全帽&#xff0c;接着再讲讲高端安全帽。做高端安全帽的企业非常少&#xff0c;估计一只手都数的出来。确实也和智能安全帽这个领域体量有关系&#xff0c;并且他有一个新的“劲敌”——智能眼镜从其他领域瓜分原属于他的市场&#xff0c;这些都是题外话…

Cadence OrCAD学习笔记(1)OrCAD入门介绍

最近换份工作主要用到Cadence&#xff0c;之前都是用AD居多&#xff0c;所以现在也开始记录下Cadence学习过程&#xff0c;方便后面复习。 参考教程&#xff1a; OrCAD视频教程第1期&#xff1a;OrCAD入门介绍_哔哩哔哩_bilibili 本期主要介绍OrCAD的主要部件 其中用的较多的…

【软件开发规范篇】Git分支使用规范

作者介绍&#xff1a;本人笔名姑苏老陈&#xff0c;从事JAVA开发工作十多年了&#xff0c;带过刚毕业的实习生&#xff0c;也带过技术团队。最近有个朋友的表弟&#xff0c;马上要大学毕业了&#xff0c;想从事JAVA开发工作&#xff0c;但不知道从何处入手。于是&#xff0c;产…

软考之零碎片段记录(二十七)+复习巩固(十三、十四)

学习 1. 案例题 涉及到更新的。肯能会是数据流的终点E, P, D 数据流转。可能是 P->EP->D(数据更新)P->P(信息处理)D->P(提取数据信息) 2. 案例2 补充关系图时会提示不增加新的实体。则增加关联关系 3. 案例3 用例图 extend用于拓展&#xff0c;当一个用例…

磁盘未格式化,数据恢复大揭秘

一、磁盘未格式化现象概述 在日常使用电脑的过程中&#xff0c;我们有时会遇到磁盘未格式化的提示&#xff0c;这意味着我们的磁盘突然间变得不可识别&#xff0c;所有的数据和文件都似乎消失了。这种情况常常发生在外接硬盘、U盘等存储设备上&#xff0c;给我们的工作和生活带…