HTML层叠与继承

最新推荐文章于 2021-09-12 17:56:47 发布

原创最新推荐文章于 2021-09-12 17:56:47 发布 · 197 阅读

0 ·

CC 4.0 BY-SA版权

本文深入探讨了CSS中的层叠策略，包括开发者样式表的重要性、选择器特殊性和权重计算。权重相同时，后出现的样式生效。此外，还介绍了CSS的继承特性，子元素可以继承父元素的部分样式，但并非所有属性都可继承，如宽度和边框等。理解这些原理对于优化网页样式控制至关重要。

层叠

声明冲突，同一个样式，多次元元素设置层叠，浏览器解决。

比较重要性

开发者样式表加了！mprotant
开发者样式表中的普通样式
浏览器默认样式

选择器的特殊性

通过选择器计算出一个4位数（0000）权重值

内联样式千位记1

id 百位记1

类选择器属性选择器伪类选择器十位记1

元素伪元素个位记1

同时存在多个选择器时累加。

权重相同时，代码靠后时胜出。

最先看自己的，自己没有再往上找父级元素。

继承

子元素会继承父元素某些css属性。

关于本文属性的样式都可以继承。

<a>元素浏览器有默认颜色

不能继承

width

border

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

黑夜问白天_

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

CSS层叠与继承的使用深入剖析

09-25

CSS层叠与继承是CSS（层叠样式表）中两个非常关键的概念，它们共同决定了元素的最终样式。深入了解这两个概念可以帮助开发者更好地控制网页的样式表现。 **一、CSS层叠** 层叠是CSS中处理样式冲突的核心机制。当一...

CSS 属性详解 - 继承、层叠与类型

10-09

本文全面解析了 CSS 中有关元素隐藏、继承属性、层叠规则以及不同显示类型的概念与用法。主要内容包含了 CSS 属性是如何遗传的，哪些常见属性能够从祖先继承，如何解决多重样式的冲突并理解 CSS 权重机制；阐述了 ...

参与评论您还未登录，请先登录后发表或查看评论

HTML css继承与层叠样式

聽凨不是雨的博客

03-19

241

HTML css继承与层叠样式一：继承基本定义就是给一个父元素设置一些样式后，其属性值会被其后代继承。需要注意的是后代只能继承父元素的文本样式，不能继承盒子（块元素）的样式。代码： ...

HTML的运用——css的层叠性和继承性

weixin_48619092的博客

09-07

132

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>D.

七天学会html5和css3之三大特性层叠性、继承性、优先级（权重叠加和计算）（26）

weixin_45147894的博客

06-04

385

CSS层叠性 - 概念：所谓层叠性是指多种CSS样式的叠加。是浏览器处理冲突的一个能力,如果一个属性通过两个相同选择器设置到同一个元素上，那么这个时候一个属性就会将另一个属性层叠掉 - 原则： - 样式冲突，遵循的原则是**就近原则。** 那个样式离着结构近，就执行那个样式。 - 样式不冲突，不会层叠 CSS层叠性最后的执行口诀：长江后浪推前浪，前浪死在沙滩上。 <!doctype html> <html> <head> ...

(前端)html与css，css 4 、继承性和层叠性

weixin_30408165的博客

06-12

131

1、继承性层叠式的第一个特性:继承性继承性:给祖先设置属性，后代会继承祖先里的某些属性(并不是全部属性都继承过来) 代码↓ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"...

html之css属性选择器，伪类，继承，选择器优先级，float

Quincy.Coder的博客

09-20

1487

属性选择器可以给标签写一个自定义属性：<div class="c2" quincy="q1"></div>查找时可以根据自定义属性名和值去查找标签：div[quincy] 或者div[quincy='q1']伪类anchor伪类a:hover{ color:red; }before after伪类a:after{ color:blue; }继承代码<!DOCTYPE html> <h

CSS 层叠和继承实现

09-25

CSS层叠（Cascade）和继承（Inheritance）是CSS样式应用中的两个核心概念，它们决定了元素如何获取和处理样式规则。理解这两个概念对于创建一致且可预测的网页布局至关重要。 1. **层叠** 层叠是CSS处理多个样式...

浅谈CSS中的继承性,特殊性,层叠性和重要性

09-24

CSS（Cascading Style Sheets）层叠样式表是用于控制网页外观和格式的标记语言，它通过继承性、特殊性、层叠性和重要性这四个核心特性来决定样式应用的优先级和规则。继承性是指一些CSS属性可以被子元素继承，也...

html代码层次选择器,CSS简介、工作原理、语法、CSS选择器、级联（优先级）、继承...

weixin_30745053的博客

06-03

314

CSS简介、工作原理、语法、CSS选择器、级联(优先级)、继承CSS简介、工作原理、语法、CSS选择器、级联(优先级)、继承CSSCSS，Cascading Style Sheets，层叠样式表，级联样式表层叠：多个样式修饰一个结构子元素从父元素那里继承样式相当于形容词，修饰网页完成布局企业级编程的重点在层叠，与学校不同代码习惯缩进是好习惯，方便找层次结构当一个浏览器在显示文档的时候，需要将文档...

html与css的进阶：继承性，选择器权重，css reset，布局技巧

weixin_49527298的博客

09-12

266

这篇文章主要是关于HTML与css特点介绍 子元素继承父元素的样式 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initi.

6.属性值的计算过程

hua_cuo的博客

12-06

212

属性值的计算过程一个元素一个元素依次渲染，顺序按照页面文档的树形目录结构进行 <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body>

html中可以被继承的属性,css继承性和不继承的属性。

weixin_29554335的博客

06-04

1293

在CSS中并不是所有的属性都是能够继承的，因此在使用时一定要了解哪些是能够继承的哪些是不能够继承的。visibility和cursor能够被所有元素继承；letter-spacing，word-spacing，white-space，line-height，color，font，font-family，font-size，font-style，font-variant，font-weight，te...

html中能继承的样式,css有哪些属性可以继承？

weixin_31147827的博客

06-11

823

大家好，我是IT修真院深圳分院第04期学员，一枚正直善良的web程序员。今天给大家分享一下，修真院官网 js任务中可能会使用到的知识点：css有哪些属性可以继承？1.背景介绍在我们深入探讨继承之前，有必要先理解文档树。所有的HTMl文档都是树，文档树由HTML元素组成,文档树和家族树类似，也有祖先、后代、父亲、孩子、兄弟祖先指任意相连，但是在文档树上部的元素。后代指任意相连，但是在文档树下部的元素...

html中可以被继承的属性,可以继承和不可以继承的样式属性

weixin_29912855的博客

06-04

516

本文将要为您介绍的是可以继承和不可以继承的样式属性,教程操作方法:无继承性的属性1.display:规定元素应该生成的框的类型2.文本属性vertical-align:垂直文本对齐text-decoration：规定添加文本的装饰text-shadow：文本阴影效果white-space：空白符的处理unicode-bidi:设置文本的方向3.盒子模型的属性width;height;margin，...

关于解决子元素继承父元素事件的问题

bitwusong的博客

03-24

1812

子元素不仅可以继承父元素的样式，还可以继承父元素的事件，所以我们可以利用这个原理来实现只给父元素添加一个事件，所有的子元素也相继有了这个事件，但是会有一个问题，当我们触发了子元素父元素也会触发该事件，这就很头疼了，有什么办法可以解决这个问题呢？当然有，只要给每个子元素都取消冒泡就可以了，e.stopPropagation();

CSS 会被继承的属性

weixin_33994429的博客

02-15

686

文本 color(颜色，a元素除外) direction(方向) font（字体） font-family（字体系列） font-size（字体大小） font-style（用于设置斜体） font-variant（用于设置小型大写字母） font-weight（用于设置粗体） letter-spacing（字母间距） line-height（行高） text-a...

html如何继承父元素的高度,css让子元继承父元素的高度

weixin_36367249的博客

06-17

3052

css让子元继承父元素的高度情景描述：父元素由一个设置了高度的元素撑起，另一个元素自动继承父元素的高，并且两元素在一行显示。现在情况style.far{border: 1px solid bisque;}.s1{height: 150px;width: 100px;background-color: blue;display: inline-block;}.s2{height: 100%;widt...

简述css中的层叠与继承

最新发布

06-10

### CSS层叠与继承的工作机制及区别 #### 1. 继承的工作机制 CSS中的继承是指某些属性会从父元素自动传递到子元素。例如，`color` 和 `font-family` 是典型的可继承属性。如果在父元素中定义了这些属性，子元素将自动继承这些值，除非子元素有明确的覆盖声明[^3]。 ```html <body style="color: blue;"> <p>我是蓝色文字</p> </body> ``` 上述代码中，`<p>` 元素继承了 `<body>` 的颜色属性，因此文字为蓝色。然而，并非所有属性都支持继承，例如 `border`、`margin` 和 `padding` 等需要显式定义[^4]。 #### 2. 层叠的工作机制层叠是CSS解决冲突的核心机制，用于确定当多个规则应用于同一个元素时，哪个规则生效。层叠遵循以下原则： - **权重优先级**：带有 `!important` 的规则具有最高优先级，可以覆盖其他规则。 - **来源优先级**：用户代理样式（浏览器默认样式） < 用户样式（读者样式） < 开发者样式（创作人员样式）。如果开发者样式带有 `!important`，则优先于用户样式的普通声明[^5]。 - **选择器特殊性**：特殊性较高的规则优先于特殊性较低的规则。例如，类选择器 `.class` 的特殊性高于标签选择器 `div`。 - **顺序优先级**：如果以上条件相同，则最后出现的规则生效[^5]。 ```css /* 示例 */ body { color: blue; /* 权重较低 */ } body { color: red !important; /* 权重较高，覆盖上一条规则 */ } ``` 在上述代码中，`color: red` 将生效，因为带有 `!important` 声明。 #### 3. 继承与层叠的区别 | 特性 | 继承 | 层叠 | |------------|------------------------------------------------|------------------------------------------------| | 定义 | 子元素从父元素自动获取某些属性 | 多个规则应用到同一元素时决定哪个规则生效 | | 作用范围 | 只适用于可继承属性 | 所有CSS属性 | | 冲突解决 | 不涉及冲突，仅传递属性 | 涉及冲突，通过权重、来源、特殊性和顺序解决 | | 使用场景 | 设置全局文本样式（如字体、颜色） | 解决样式冲突或实现复杂布局 | #### 4. 实际应用示例以下是一个结合继承和层叠的示例： ```html <style> body { color: blue; /* 可继承属性 */ font-size: 16px; /* 可继承属性 */ } .box { color: green; /* 覆盖继承的颜色 */ } .box p { color: inherit; /* 强制继承父元素颜色 */ } </style> <body> <div class="box"> <p>我是绿色文字</p> </div> </body> ``` 在上述代码中： - `<p>` 元素最初继承 `<body>` 的颜色（蓝色）。 - `.box` 类将颜色改为绿色，覆盖了继承的颜色。 - `.box p` 使用 `inherit` 关键字，强制从父元素 `.box` 继承颜色（绿色）[^1]。 ### 结论继承关注的是属性如何从父元素传递到子元素，而层叠则是关于多个规则之间的优先级和冲突解决。两者共同构成了CSS的核心工作机制。