在Angular应用程序中从父组件继承CSS
在Angular应用程序中从父组件继承CSS
提问于 2016-11-07 12:47:16
我正在构建一个应用程序，我必须硬‘重置’所有浏览器应用的默认CSS。
但是，我必须为每个xxx.component.css复制/粘贴它，因为它似乎没有继承基线app.component.css中的任何css。
所有内容都位于app.component.html模板下，如下所示：
<div class="wrapper">
<app-left-nav></app-left-nav>
<app-top-nav></app-top-nav>
<app-todo-section></app-todo-section>
<app-details-section></app-details-section>
<footer></footer>
</div>有没有办法在Angular中配置CSS继承？它应该在默认情况下发生吗？
下面是app.component.css中“重置”代码的一小段
html,
body,
div,
span,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
mark,
audio,
video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}我做错了什么吗？如果需要代码示例，请让我知道！
回答 2
Stack Overflow用户
发布于 2018-08-10 06:23:34
在angular中，每个组件都有自己的css。根据angular 6 documentation的说法，这种样式只适用于组件。Angular通过为每个html元素和组件中的每个css选择器设置一个属性来实现这一点。例如：
html
<nav _ngcontent-c2="" id="main-navigation">
<ul _ngcontent-c2="">
<li _ngcontent-c2="" routerlink="/dashboard" tabindex="0" ng-reflect-router-link="/dashboard"></li>
<li _ngcontent-c2="" routerlink="/inbox" tabindex="0" ng-reflect-router-link="/inbox"></li>
</ul>
</nav>css
#main-navigation[_ngcontent-c2] > ul[_ngcontent-c2] > li[_ngcontent-c2] {
flex: 1;
border-right: 1px solid rgb(240, 240, 256);
text-align: center;
cursor: pointer;
}如果要使用适用于所有元素的样式，请将其添加到 src/styles.css 文件中。但即便如此，它也可能有点棘手，因为angular会为您添加的每个组件添加一个html-tag。
Stack Overflow用户
发布于 2016-11-07 13:58:59
无论您使用哪种框架，您的CSS都将根据CSSOM进行继承。因此，如果CSS在子组件上不起作用，请执行以下操作：
- 查看相应页面上是否正在加载具有默认样式的CSS文件
- 查看您或您可能正在使用的任何框架在相应页面中是否有覆盖的CSS样式。
TL;DR:是，默认情况下会发生
话虽如此，您应该注意到，的一些CSS属性不是继承的。有关CSS继承规则的完整列表，请参阅here
在您使用的属性中，以下属性未被继承：
- margin
- padding
- border
- vertical-align
但是，如果只是您在列表中定义的HTML标记需要应用CSS，这应该无关紧要。仅当您需要继承时，上述方法才适用
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/40458014
复制相关文章
相似问题
腾讯云开发者
