CSS的三大特性(层叠性、继承性、优先级---------很重要)

CSS 有三个非常重要的三个特性:层叠性、继承性、优先级。

  • 层叠性

场景:相同选择器给设置相同的样式,此时一个样式就会覆盖(层叠)另一个冲突的样式。层叠性主要解决样式冲突 的问题

原则:

 样式冲突,遵循的原则是就近原则,哪个样式离结构近,就执行哪个样式

 样式不冲突,不会层叠

层叠性:在条件相同的情况下会,前面的样式会覆盖前面的样式

列如:

最后文字会显示成粉色

  • 继承性

CSS中的继承: 子标签会继承父标签的某些样式,如文本颜色和字号。简单的理解就是:子承父业。

特点:

 恰当地使用继承可以简化代码,降低 CSS 样式的复杂性
 子元素可以继承父元素的样式(text-,font-,line-这些元素开头的可以继承,以及color属性)
 继承性口诀:龙生龙,凤生凤,老鼠生的孩子会打洞

列如

p标签没有对文字颜色进行设置,但div设置了,而div是p标签的父亲,所以就继承了div的属性,最后显示成粉色

行高的继承性

 行高可以跟单位也可以不跟单位
 如果子元素没有设置行高,则会继承父元素的行高为 1.5
 此时子元素的行高是:当前子元素的文字大小 * 1.5 
 body 行高 1.5 这样写法最大的优势就是里面子元素可以根据自己文字大小自动调整行高

  • 优先级

当同一个元素指定多个选择器,就会有优先级的产生。

 选择器相同,则执行层叠性

 选择器不同,则根据选择器权重执行

注意:

1. 权重是有4组数字组成,但是不会有进位。
2. 可以理解为类选择器永远大于元素选择器, id选择器永远大于类选择器,以此类推..
3. 等级判断从左向右,如果某一位数值相同,则判断下一位数值。
4. 可以简单记忆法: 通配符和继承权重为0, 标签选择器为1,类(伪类)选择器为 10, id选择器 100, 行内样式表为1000, !important 无穷大.
5. 继承的权重是0, 如果该元素没有直接选中,不管父元素权重多高,子元素得到的权重都是 0。

列如

 div ul li ------> 0,0,0,3
 .nav ul li ------> 0,0,1,2
 a:hover -----—> 0,0,1,1
 .nav a ------> 0,0,1,1

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

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

相关文章

行政前台快递管理教程

行政前台快递管理,成了企业前台工作人员不可逃避的话题。看似简单的几个字,却难倒了不少人。身边有从事行政前台工作的朋友,应该或多或少都会听其抱怨过...... 为什么公司寄件管理这么难? 为什么员工不能按规定寄件?…

我在代码随想录|写代码之203. 移除链表元素,707. 设计链表,206. 反转链表

​第一题 ​​ 203. 移除链表元素 题目: 思路分析: 我们要删除节点说白了就是将节点移除,将要删除的节点的前一个的next域移动到要删除节点的next域,我们可以这样写当我们运到我们要删除节点然后件他删除,那么怎么删除?我们可以直接让我们要删除的元素找不到。如果我们直接将…

MySQL事务与MVCC详解

前置概念之事务 在开始MVCC的讨论之前,我们必须了解一些关于事务的概念。 什么是事务 现在我们开发的一个功能需要进行操作多张表,假如我们遇到以下几种情况: 某个逻辑报错数据库连接中断某台服务器突然宕机… 这时候我们数据库执行的操作可能才到一…

理解Socket

前言 我在去年就学习过Java中Socket的使用,但对于Socket的理解一直都是迷迷糊糊的。看了网上很多关于Socket的介绍,看完还是不太理解到底什么是Socket,还是很迷。直到最近在学习计算机网络,我才对Socket有了一个更深地理解。之前一…

Chapter 7 - 3. Congestion Management in Ethernet Storage Networks以太网存储网络的拥塞管理

Pause Threshold for Long Distance Links长途链路的暂停阈值 This section uses the following basic concepts: 本节使用以下基本概念: Bit Time (BT): It is the time taken to transmit one bit. It is the reciprocal of the bit rate. For example, BT of a 10 GbE po…

Axure中动态面板使用及轮播图多种登录方式左侧导航栏之案列

🎬 艳艳耶✌️:个人主页 🔥 个人专栏 :《产品经理如何画泳道图&流程图》 ⛺️ 越努力 ,越幸运 目录 一、轮播图简介 1、什么是轮播图 2、轮播图有什么作用 3、轮播图有什么特点 4、轮播图适应范围 5、…

使用opencv的Canny算子实现图像边缘检测

1 边缘检测介绍 图像边缘检测技术是图像处理和计算机视觉等领域最基本的问题,也是经典的技术难题之一。如何快速、精确地提取图像边缘信息,一直是国内外的研究热点,同时边缘的检测也是图像处理中的一个难题。早期的经典算法包括边缘算子方法…

Android--UML类图使用详解

明敕星驰封宝剑,辞君一夜取楼兰 一,定义 类图(Class diagram)是显示了模型的静态结构,特别是模型中存在的类、类的内部结构以及它们与其他类的关系等。类图不显示暂时性的信息。类图是面向对象建模的主要组成部分。它既用于应用程序的系统分…

Open3D颜色变换

open3D的颜色是用小数表示的,和我们正常0-255不一样。换算也很简单 例如 红色RGB(230,26,26) 转换为 Open3D红色是RGB(0.9,0.1,0.1) 计算机颜色255*open3D颜色值 Open3D颜色值计算机颜色值/255 mesh_box.paint_uniform_color([0.9, 0.1, 0.1]) Open3D颜色值 value/…

[CC13X0] XDS100V3连接报错:Make sure your device is unlocked.

用XDS100V3给CC1310下载程序时,发现如下连接错误: An error occurred while hard opening the controller. -----[An error has occurred and this utility has aborted]-------------------- This error is generated by TIs USCIF driver or utilities…

Java8实战 - 行为参数化传递代码

背景: 根据《java8实战》把第二章简单概括一下。 在软件工程中,一个最重要的问题是,用户的需求会一直变化,如何应对不断变化的需求,并且把工作量降到最低是需要考虑的,而行为参数化就是一个处理频繁变更需…

飞天使-docker知识点8-docker的资源限制

文章目录 容器资源限制示例 容器资源限制 Docker提供了多种资源限制的方式,可以根据应用程序的需求和系统资源的可用性进行选择。以下是一些常见的Docker资源限制及其使用情况:CPU限制:通过设置CPU的配额(quota)和周期…