css层叠性,继承性,优先级

前言

  本文概要:讲述css的三大特性,层叠,继承和优先级。

层叠性

描述:我们试想以下这种情况:我们定义了同一个选择器,但是定义的属性不同。属性有相同的也有不同的,那么最后我们这个页面会听谁的。层叠性就是针对这种情况。

层叠性原则:所有相同选择器的属性合起来,相同的属性后定义的覆盖前定义的。

案例演示:

    <style>div {background-color: blue;color: aqua;}div {background-color: darkmagenta;}</style>
</head><body><div>猜猜谁管事?</div>
</body></html>

结果如下:

总结一句话:不冲突一起上,冲突了后来居上。

继承性

描述:这种特性是针对文字,颜色的样式。总结就是:父标签的文字及颜色行高样式,如果子标签没有额外定义,那么就会直接用父标签文字的样式进行显示。

继承属性:text,line,color这类跟文字有关的标签。

案例演示:(body标签是一切内容标签的父标签,我们给body标签设置文字属性看看)

    <title>Document</title><style>body {color: bisque;font: 700 20px/1.5 "微软雅黑";}</style>
</head><body><div>猜猜谁管事?</div>
</body></html>

结果如下:

可以看到给body设置的文字属性直接就被子标签div给继承了。

上面的1.5是行高,可以写20px这类的固定行高,上面这个写法是文字的型号的1.5倍。后面给子标签设置文字大小的话行高会跟着子标签变化。

优先级

优先级:

越往下优先级越高。

描述:在相同优先级的情况下我们有层叠性,但是这种不同的选择器我们会根据他的优先级进行判定。

复合选择器的优先级:

复合选择器是一种加法

比如div p是两个元素选择器,他们都是0,0,0,1,相加就是0,0,0,2

看上面权重是四个数,我们复合选择器会相加

这里假设两个数:1,2,6,4和2,6,8,2

他们依次从左往右比较,相同比较下一位,得到大的一个。

上面两个2,6,8,2最右侧大,则听他的。

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

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

相关文章

CSS display属性

目录 概述&#xff1a; 设置display示例&#xff1a; none&#xff1a; block&#xff1a; inline&#xff1a; inline-block &#xff1a; 概述&#xff1a; 在CSS中我们可以使用display属性来控制元素的布局&#xff0c;我们可以通过display来设置元素的类型。 在不设置…

封装个js分页插件

// 分页插件类 class PaginationPlugin {constructor(fetchDataURL, options {}) {this.fetchDataURL fetchDataURL;this.options {containerId: options.containerId || paginationContainer,dataSizeAttr: options.dataSizeAttr || toatalsize, // 修改为实际API返回的数据…

vue里面事件修饰符.prevent使用案例

什么是.prevent事件修饰符&#xff1f; 在Vue中&#xff0c;事件修饰符是指在事件处理函数后面添加的特殊标记&#xff0c;用于修改事件的行为。.prevent事件修饰符是其中之一&#xff0c;它的作用是阻止事件的默认行为。通常情况下&#xff0c;当用户触发某些事件时&#xff0…

ppt技巧:​如何将两个PPT幻灯片文件合并成一个?

第一种方式&#xff1a;复制粘贴幻灯片 1. 打开第一个PPT幻灯片文件&#xff0c;确保你已经熟悉该文件的内容和布局。 2. 打开第二个PPT幻灯片文件&#xff0c;浏览其中的所有幻灯片&#xff0c;选择你想要合并到第一个文件中的幻灯片。 3. 使用快捷键CtrlC&#xff08;Wind…

虚拟ip地址怎么弄到手机上

在当下的社会&#xff0c;手机已经变得至关重要&#xff0c;它融入了我们的日常生活&#xff0c;无论是上网冲浪、社交互动&#xff0c;还是工作学习&#xff0c;都离不开它。但有时候&#xff0c;由于某些限制&#xff0c;我们可能无法充分享受网络带来的便利。这时&#xff0…

Nginx part2.1

目录 搭建目录网页 为网页设置用户登录 做一个文件目录网页&#xff0c;并进行登陆 示范 搭建目录网页 启动nginx&#xff1a; systemctl start nginx 开机自启动nginx&#xff1a; systemctl enable nginx 启动完服务后&#xff0c;查看自己的nginx的状态&#xff1a;sys…

【JavaWeb】Day47.Mybatis基础操作——删除

Mybatis基础操作 需求 准备数据库表 emp 创建一个新的springboot工程&#xff0c;选择引入对应的起步依赖&#xff08;mybatis、mysql驱动、lombok&#xff09; application.properties中引入数据库连接信息 创建对应的实体类 Emp&#xff08;实体类属性采用驼峰命名&#xf…

【C++提高】常用容器

常用容器 引言&#xff1a;迭代器的使用一、vector容器1. vector基本概念2. vector的迭代器3. vector构造函数4. vector赋值操作5. vector容量和大小6. vector插入和删除7. vector数据存取8. vector互换容器9. vector预留空间 二、deque容器1. deque容器的基本概念2. deque容器…

python免费调用阿里云通义千问(q-wen-max)大模型API

文章目录 通义千问开通免费API Keypython调用阿里云通义千问API 通义千问 通义千问&#xff0c;是基于阿里巴巴达摩院在自然语言处理领域的研究和积累。采用更先进的算法和更优化的模型结构&#xff0c;能够更准确地理解和生成自然语言、代码、表格等文本。 支持更多定制化需…

HarmonyOs开发:导航tabs组件封装与使用

前言 主页的底部导航以及页面顶部的切换导航&#xff0c;无论哪个系统&#xff0c;哪个App&#xff0c;都是最常见的功能之一&#xff0c;虽然说在鸿蒙中有现成的组件tabs可以很快速的实现&#xff0c;但是在使用的时候&#xff0c;依然有几个潜在的问题存在&#xff0c;第一&a…

GRAF: Generative Radiance Fields for 3D-Aware Image Synthesis

GRAF: Generative Radiance Fieldsfor 3D-Aware Image Synthesis&#xff08;基于产生辐射场的三维图像合成&#xff09; 思维导图&#xff1a;https://blog.csdn.net/weixin_53765004/article/details/137944206?csdn_share_tail%7B%22type%22%3A%22blog%22%2C%22rType%22%3…

THREEJS 使用CatmullRomCurve3实现汽车模型沿着指定轨迹移动

效果预览 准备所需资源 搭建场景环境 const container document.querySelector("#box_bim");// 创建摄像机camera new THREE.PerspectiveCamera(50,window.innerWidth / window.innerHeight,0.1,1000);// camera.position.set(500, 500, 500);// 调整近裁减值camer…

java基础教程(2)-Java基本数据类型

一个Java程序的基本结构&#xff1a; public class DemoTest {public static void main(String[] args) {// 打印一句话System.out.println("hello...");} }以上程序功能是实现打印一句话到控制台输出&#xff1b;这是一个基本的java结构&#xff0c;所有java程序都…

【数据结构】 单向链表的实现

单向链表是数据结构中的一种&#xff0c;它由节点组成&#xff0c;每个节点包含两个部分&#xff1a;数据域和指针域。数据域用于存储节点的值&#xff0c;指针域则用于指向下一个节点。单向链表的特点是只能从头节点开始遍历到尾节点&#xff0c;不能反向遍历。 1 单向链表的…

深入剖析图像平滑与噪声滤波

噪声 在数字图像处理中&#xff0c;噪声是指在图像中引入的不希望的随机或无意义的信号。它是由于图像采集、传输、存储或处理过程中的各种因素引起的。 噪声会导致图像质量下降&#xff0c;使图像失真或降低细节的清晰度。它通常表现为图像中随机分布的亮度或颜色变化&#…

面试不慌张:一文读懂FactoryBean的实现原理

大家好&#xff0c;我是石头~ 在深入探讨Spring框架内部机制时&#xff0c;FactoryBean无疑是一个关键角色&#xff0c;也是面试中经常出现的熟悉面孔。 不同于普通Java Bean&#xff0c;FactoryBean是一种特殊的Bean类型&#xff0c;它的存在并非为了提供业务逻辑&#xff0c;…

docker-002常用命令

启动类命令 启动systemctl start docker停止systemctl stop docker重启systemctl restart docker查看状态systemctl status docker开机启动systemctl enable docker概要docker info总体帮助文档docker --help命令帮助文档docker 具体命令 --help镜像命令 查看主机上的镜像 命令…

基于Springboot的小区物业管理系统

基于SpringbootVue的小区物业管理系统的设计与实现 开发语言&#xff1a;Java数据库&#xff1a;MySQL技术&#xff1a;SpringbootMybatis工具&#xff1a;IDEA、Maven、Navicat 系统展示 用户登录 首页 用户管理 员工管理 业主信息管理 费用信息管理 楼房信息管理 保修信息…

【原创教程】海为PLC与RS-WS-ETH-6传感器的MUDBUS_TCP通讯

一、关于RS-WS-ETH-6传感器的准备工作 要完成MODBUS_TCP通讯,我们必须要知道设备的IP地址如何分配,只有PLC和设备的IP在同一网段上,才能建立通讯。然后还要选择TCP的工作模式,来建立设备端和PC端的端口号。接下来了解设备的报文格式,方便之后发送报文完成数据交互。 1、…

自定义Blazor单文件Web程序端口

#接 上篇 Mysql快速迁移版的制作过程# 上一篇《Mysql8快速迁移版的制作过程》完成了快速迁移的数据库的准备&#xff0c;今天接着讲基于Blazor的Web程序快速迁移版的制作。 单文件发布的难点不在发布而是因为程序系统默认给了个5001的端口&#xff0c;而是如何能够让用户自定…