CSS第一章：10.继承

已于 2022-12-07 04:42:33 修改
阅读量163 收藏
点赞数
分类专栏： 前端CSS 文章标签： HTML 前端 CSS
于 2022-04-27 14:56:20 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43768851/article/details/124450417
版权
本文探讨了CSS中样式继承的原理，指出祖先元素的一些样式可以被后代元素继承，但并非所有样式都可继承，如背景颜色。通过实例展示了哪些样式可以被继承，哪些不能，帮助开发者节省时间和提高效率。重点讲解了颜色和选中效果的继承差异，并提供了相关CSS代码及实际显示效果。
摘要由CSDN通过智能技术生成

总览

1.祖先元素的某些样式 会被后代元素 所继承
2.并不是祖先元素所有的样式都会被继承，比如说祖先元素的背景颜色background
3.查看一个祖先元素中的某些样式是否会被继承 应该去找CSS帮助手册，查看这个样式是否是 inherited -> yes

一、继承

1.功能：方便开发，为节约时间。只需要设定一次样式，这些样式就能被后代元素所应用

2.HTML代码：
在这里插入图片描述
情况一：不会被继承的举例
3.CSS代码：
在这里插入图片描述
4.实际显示：（span并未继承 selection 选中效果）
在这里插入图片描述

情况二：会被继承的举例
3.CSS代码：
在这里插入图片描述
4.实际显示：（span 继承了 祖先元素 p 的颜色效果）
在这里插入图片描述

MicroLindb
关注
专栏目录
CSS3-三大特性-继承性、层叠性、优先级
weixin_54021642的博客
06-20 2082
CSS三大特性之继承性、层叠性和优先级
CSS取消父级元素继承下来的样式
immersed_的博客
08-18 5975
css的继承：就是给父级设置一些属性，子级继承了父级的该属性，这就是我们的css中的继承。官方解释：继承是一种规则，它允许样式不仅应用于特定的html标签元素，而且应用于其后代元素。
2020-10-03
weixin_49792363的博客
10-03 93
前端学习day2（下） 继承 样式的继承，我们为一个元素设置的样式同时也会应用到它的后代元素上 继承是发生在祖先后后代之间的 继承的设计是为了方便我们的开发， 利用继承我们可以将一些通用的样式统一设置到共同的祖先元素上， 这样只需设置一次即可让所有的元素都具有该样式 注意:并不是所有的样式都会被继承; 比如背景相关的，布局相关等的这些样式都不会被继承。 <div id="five"> <p>这是div里面的p</p> 这也是div里面的，但
CSS第一章：4.元素关系（兄弟、祖后代关系）；关系选择器
要思考，要努力
04-26 5271
总览1.元素关系2.关系选择器一、元素关系1.元素关系1：父子· 父元素：直接包含子元素的元素叫做父元素· 子元素：直接被父元素包含的元素叫做子元素2.元素关系2：祖先后代 · 祖先元素：直接或间接包含后代元素的元素叫做祖先元素 · 后代元素：直接或间接被祖先元素包含的元素叫做后代元素 3.元素关系3：兄弟 · 兄弟元素：拥有相同父元素的元素叫做兄弟元素 4.举例说明： · 父子关系： div > p1号 div > span2号 p > span1号 · 祖先后代关系：
前端的学习之路：初级CSS---关系选择器
weixin_44647555的博客
02-03 177
关系选择器 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>关系选择器</title> <style> /* 为div
第1章CSS是什么共23页.pdf.zip
11-25
通常，第一章会涵盖CSS的起源、用途、基本语法以及它在网页设计中的重要性。可能会讨论到盒模型、选择器、属性、值等核心概念。 【标签】：“第1章CSS是什么共23页.pd” 这个标签可能是部分错误，原本可能是“pd”...
HTML5+CSS3网页设计基础-第一章-网页设计基础.pptx
12-23
DOCTYPE声明必须是HTML文档的第一行，位于标签之前。标签位于<!doctype>标记之后，也称为根标记，表示HTML文档的开始。头标签用于定义HTML文档的头部信息，紧跟在标签之后。 6.CSS的层叠和继承性 CSS的层叠和继承...
第12章 CSS入门.pdf
04-27
CSS入门学习要点涵盖了使用CSS的基本概念、创建CSS样式的三种方式、以及CSS的层叠与继承机制。本章从基础到进阶，逐步引导学习者了解CSS如何作用于HTML文档，以及如何通过不同方法组织CSS代码来达到对网页样式的设计...
如何在CSS中实现父选择器效果？
weixin_34256074的博客
03-02 2104
2019独角兽企业重金招聘Python工程师标准>>> ...
CSS 继承性
yhy_的博客
06-22 309
以下是CSS3的：
html中 祖先元素 元素关系
你好牛蛙！
09-24 2106
父元素：直接包含子元素的 子元素：直接被父元素包含的 祖先元素：直接或间接包含后代的，父元素也是 后代元素：直接或间接被祖先元素包含的，子元素也是 兄弟元素：拥有相同父元素的互相叫兄弟元素 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>父子元素</title> <style type="text/css"> #d1 sp
获取祖先元素和后代元素
qq_29469441的博客
05-20 2672
一、获取祖先元素 1、获取直接父级    语法： $(selector).parent();//获取元素的直接父级元素 2、获取元素的所有祖先元素    语法： $(selector).parents([selector]);//后面加上选择器可以过滤祖先元素 3、获取某个元素到某个元素间的所有父级元素    语法：
CSS后代选择器
热门推荐
歪脖先生的博客
12-02 1万+
关系选择器 关系选择器，顾名思义，是根据HTML元素在DOM树中的关系来选择元素，这些关系包括后代、父子、同胞、相邻同胞。于是，关系选择器就包括后代选择器、子选择器、相邻同胞选择器、同胞选择器。 表 2-2 关系选择器 选择器 语法 功能描述 版本 后代选择器 E F 选择E元素的所有后代F元素 1
Vue 3:实现页面返回上一页的功能
weixin_73060959的博客
09-15 245
在Vue 3中，可以使用Vue Router库来实现页面返回上一页的功能。首先，确保你已经安装并设置了Vue Router。这两个方法都可以使浏览器的历史记录回退一步。来获取Vue Router实例。然后，我们定义了一个。函数会被触发，从而使浏览器返回到上一个访问的页面。在这个例子中，我们使用。
-webkit-box-reflect属性与倒影效果的实现
读心悦
09-13 577
是一个非标准的 CSS 属性，主要用于在 WebKit 浏览器（如 Chrome 和 Safari）中创建元素的倒影效果。这个属性并不是 CSS 规范的一部分，但在实践中经常被用来实现简单而有趣的视觉效果。
​美​团​一​面​
qq_43858368的博客
09-14 1689
同步代码：按照代码的书写顺序立即执行。异步代码：通过关键字，异步操作会被放入微任务队列中等待执行。事件循环：在同步代码执行完毕后，事件循环会检查并执行微任务队列中的任务。async2script endasync1 end这个顺序反映了JavaScript中同步与异步代码的执行机制以及事件循环的工作原理。定义：HEAD请求是一种HTTP方法，它请求服务器返回与GET请求相同的响应头部，但不返回响应的主体部分。用途：主要用于获取资源的元信息，如文件大小、最后修改时间等，而无需下载整个资源。定义。
前端项目node版本问题导致依赖安装异常的处理办法
weixin_44703272的博客
09-14 426
解决前端项目中的Node版本问题通常涉及以下步骤：检查项目文档：查看项目是否有特定的Node版本要求，如果有，确保你的Node版本与之兼容。使用Node版本管理器：如nvm（Node Version Manager）或n。它们可以让你在同一台机器上安装和切换不同版本的Node。
word-break和word-wrap
最新发布
zai329979994639的博客
09-20 213
1，word-break:break-all 例如div宽200px，它的内容就会到200px自动换行，如果该行末端有个英文单词很长（congratulation等），它会把单词截断，变成该行末端为conra(congratulation的前端部分)，下一行为tulation（conguatulation）的后端部分了。
Vue3中slot插槽的几种使用实践
小小默：进无止境
09-14 706
父组件子组件父组件中Category 组件标签内的东西将会呈现在子组件slot的位置（进行替换）。
CSS权威指南：第2版
第一章“CSS和文档”阐述了CSS如何拯救当时陷入困境的网页设计，并介绍了元素、display属性以及如何将CSS与XHTML结合使用。第二章“选择器”讲解了基本的选择器规则，如类和ID选择器，以及伪类和伪元素的概念。第三...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

MicroLindb

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值