Question

我正在构建一个应用程序，我必须“重置”浏览器应用的所有默认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;
}

我做错了吗？如果需要代码示例，请告诉我！

Answer 1

无论您使用什么框架，CSS都将始终根据CSSOM继承。因此，如果您的CSS不在处理子组件，请执行以下操作：

查看相应页面上是否加载了具有默认样式的CSS文件

在相应的页面中查看您或您可能正在使用的任何框架是否存在任何重写的CSS样式。

TL; DR：是的，应该默认发生

话虽如此，您应该注意某些CSS属性不会被继承。有关CSS继承规则的完整列表，请参阅here

在您使用的属性中，以下内容未被继承：

余量

填充

边界

垂直对齐

但是，如果它只是您在列表中定义的需要应用CSS的HTML标记，那么这并不重要。以上仅适用于继承

Answer 2

每个组件的角度都有自己的css。根据{{3}}，此样式仅适用于组件。 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。

从Angular Application中的父组件继承CSS

2 个答案: