我正在构建一个应用程序,我必须硬‘重置’所有浏览器应用的默认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;
}
我做错了什么吗?如果需要代码示例,请让我知道!
发布于 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。
发布于 2016-11-07 13:58:59
无论您使用哪种框架,您的CSS都将根据CSSOM进行继承。因此,如果CSS在子组件上不起作用,请执行以下操作:
TL;DR:是,默认情况下会发生
话虽如此,您应该注意到,的一些CSS属性不是继承的。有关CSS继承规则的完整列表,请参阅here
在您使用的属性中,以下属性未被继承:
但是,如果只是您在列表中定义的HTML标记需要应用CSS,这应该无关紧要。仅当您需要继承时,上述方法才适用
https://stackoverflow.com/questions/40458014
复制相似问题