CSS继承:如何重写继承的值
CSS继承基础概念
CSS继承是指子元素可以继承父元素的某些样式属性。当一个元素没有设置某个样式属性时，它会从其父元素那里继承该属性的值。这有助于减少代码量并保持页面的一致性。
继承的优势
- 代码简洁：通过继承，可以避免在每个子元素上重复设置相同的样式。
- 易于维护：修改父元素的样式会自动影响所有继承该样式的子元素。
继承的类型
CSS继承主要分为两种类型：
- 普通继承：大多数CSS属性都是普通继承的，如
color、font-size等。 - 非继承：有些属性不会被继承，如
width、height、margin等。
应用场景
假设你有一个网页，其中所有的段落（<p>）都应该有相同的字体大小和颜色，但某些特定的段落需要有不同的样式。这时，你可以设置一个父元素的样式，然后让子元素继承这些样式，再对特定子元素进行重写。
如何重写继承的值
要重写继承的值，只需在子元素上直接设置该属性即可。子元素的设置会覆盖从父元素继承的值。
示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Inheritance Example</title>
<style>
body {
color: blue;
font-size: 16px;
}
.special {
color: red;
font-size: 20px;
}
</style>
</head>
<body>
<p>This paragraph inherits color and font-size from the body.</p>
<p class="special">This paragraph overrides the inherited color and font-size.</p>
</body>
</html>在这个示例中：
body元素设置了颜色为蓝色，字体大小为16px。- 第一个
<p>元素继承了这些样式。 - 第二个
<p>元素通过添加class="special"，重写了颜色为红色，字体大小为20px。
遇到的问题及解决方法
问题：为什么某些样式没有被继承？
原因：有些CSS属性默认是不继承的，如width、height、margin等。
解决方法：检查CSS属性是否支持继承。如果不支持，需要在子元素上直接设置该属性。
问题：如何确保某个样式不被继承？
解决方法：可以使用initial关键字将属性重置为其初始值，这样子元素就不会继承该属性的值。
.parent {
color: blue;
}
.child {
color: initial; /* 子元素不会继承父元素的color属性 */
}通过这些方法，你可以更好地理解和控制CSS继承，从而优化你的网页设计。
相关·内容
1回答
其中之一是将元素的背景颜色更改为透明。包装器div附带了背景颜色，它有大量嵌套的子div，它们都继承了该颜色。"> ....
background-color: #fff;
} 我认为仅仅改变父代的颜色就会导致子代继承这种改变但是，在覆盖父级颜色作品的同时，子级仍然继承原始颜色。由于这些嵌套非常深，我不想为每个
浏览 48提问于2019-03-22得票数 1
回答已采纳
1回答
我使用twitter引导CSS已经有一段时间了。我之所以使用它，是因为我对CSS不太了解。现在，在我的代码中，我经常在元素上使用style，这个元素已经分配给了一个类。简化它的最有效的方法是什么？
浏览 3提问于2013-10-25得票数 0
回答已采纳
2回答
我正在尝试在Wordpress中快速放置一个链接，并且我们有一个相当复杂的样式应用于该部分中的所有href链接。下面是选择器和样式的一个小示例(我保留了大约40行样式) margin: 0px; 谢谢
编辑:以防不清楚，上面的CSS来自样式表，我想把它去掉。这里有超过50行的样式，为了简洁，我只展
浏览 2提问于2014-11-06得票数 0
使用JavaScript，如何获得继承的CSS属性的实际值？p style="font-size:24pt;">Test <span style="font-weight:bold;">#2</span></p>
使用jQuery代码$('p span').css('fontSize')将生成32px而不是24pt，因为它使用<
浏览 2提问于2012-04-02得票数 9
2回答
是否可以继承颜色，但重写不透明度值？下面是伪CSS中的一个示例： background-color: rgba(255, 0, 0, 0); background-colordiv style="color-class lighten"></div>
应该导致一个有色元素，而另一个元素是相同的
浏览 2提问于2017-12-15得票数 15
回答已采纳
在我看来，应该有一些Wordpress插件或hack来强制第三方插件继承css字体样式值，如字体系列、粗细、颜色、行高等，而不是重写子主题的值。挖掘插件css和js文件是一件苦差事，有谁知道有什么能做到这一点的吗？
浏览 0提问于2014-01-18得票数 0
2回答
我不明白类是如何通过将自身作为模板参数传递来从类RecursiveASTVisitor继承的。另外，重写(R)是否在行中？MyRecursiveASTVisitor(Rewriter &R) : Rewrite(R) { }
将值R赋值给变量重写？在代码中的任何地方都没有类重写定义。":“操作符是否用于继承类以外的其他内容？
浏览 2提问于2013-09-19得票数 0
回答已采纳
5回答
当我试图使用">“选择父元素的所有直接子元素时，它可以处理一些属性，如边框和all，但不适用于字体属性，如颜色、字体权重等。</ol></ul>ul>li {}ul>li {
border: solid 1px
浏览 13提问于2013-07-27得票数 3
回答已采纳
3回答
我目前正在学习如何在CSS中使用initial值。那么，initial对继承和非继承属性的确切影响是什么？他们之间有什么区别？
浏览 8提问于2017-02-02得票数 4
回答已采纳
2回答
问题是注入元素css是从文档中指定的样式表继承的。文档中使用的样式 color:red;}#myext div {}但是，我还没有在样式表中指定边框颜色，所以它继承了页面样式表和丑陋的嵌入式元素。为了克服这一点，我得出结论，指定容器(#myext)的所有css属性，这样所有子元素都会继承</e
浏览 3提问于2015-03-22得票数 2
回答已采纳
我的问题很直接:为什么HTML-CSS中的所有属性都有“继承”值。即使-尽管所有浏览器都支持所有的继承(根据我的观察，是的，所有的)属性..当我问谷歌的时候.我可以拿出一份声明
“即使某些特性是在CSS中自动继承的，但在某些情况下，您可能希望增加继承属性的权重。为应用于元素的任何CSS属性指定继承值<
浏览 3提问于2009-12-21得票数 3
回答已采纳
1回答
是否有一种避免在CSS中继承的属性的通用方法。link {color:red; }使用<a href="some" class="special">thing</a>，链接的字体颜色从a:link开始变红，但我希望它是蓝色的，就像body一样。当然，我可以说重写它
a.special:link {color:blue; so
浏览 0提问于2014-04-24得票数 0
回答已采纳
1回答
CSS中的重写和继承
、、、
我正在使用CSS和Bootstrap，这一切我都是新手。
我实际上想在我的网页中集成两种不同类型的旋转木马。知道bootstrap已经定义了一个carousel类(在bootstrap.min.css样式表中)，我已经创建了一个名为custom.css的自定义样式表，我已经在我的html代码(当然还有bootstrap.min.css)中链接了它，它包含bootstrap carousel类的另一个样式，用于定制我的
浏览 5提问于2015-09-16得票数 1
在Chrome的developer窗格中，我可以看到元素的css设置。据我所见，每个font-family值都是继承。
如何才能找到字体系列的实际值？如何跟踪根字体的定义--家族值来自继承层次结构？
浏览 0提问于2013-07-14得票数 33
回答已采纳
1回答
如果css变量未定义，我希望我的段落继承父样式。相反，它是从用户代理样式表继承的。我遗漏了什么？OverlayBodyFontWeight); line-height: var(--OverlayBodyLineHeight);我期待继承的原因是，当重写样式块为空时，该段确实从.myapp p继承。.text-overlay p {
浏览 13提问于2022-11-10得票数 1
有没有办法将一个CSS选择器的样式导入到另一个CSS选择器中，并从中添加或重写属性。original_class); /* I know this doesn't work */border:1px solid green;我只需重新声明.original_class并分配新值(因为CSS样式是从上到下重写的)，但这将替换原始CSS类的属性。我想要
浏览 3提问于2012-05-25得票数 6
回答已采纳
我想继承@classmethod of class BaseModel(object)
如何继承或重写自定义模块中的@classmethod？
浏览 3提问于2017-08-24得票数 0
回答已采纳
1回答
Ext :设计一个基类并重写它
、、、、
我试图定义一个基类，并在不同继承的子类上重写它的items。我遵循MVVM模式从后端获取记录。在stores和formulas中创建了几个ViewModel。；这3个值对于每个继承的类都是可绑定/可变的，其中3个值将与ViewModel的bind配置绑定。
包括几个默认的信任:宽度，高度，边框.
浏览 0提问于2018-04-12得票数 0
回答已采纳
1回答
在msdn规范中，我可以注意到System.Object是.Net中的最终基类。他们说是一个从System.Object继承的抽象类，重写了Equals、Compare等方法。值类型如bool、int等。从System.ValueType继承所有其他.net对象从System.Object继承。
System.Object的需求是什么？只有Sytem.Object和Sytem.ValueType (重写基类)。
浏览 1提问于2015-06-02得票数 3
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
