定义了全局css，重新设置的样式无效

Posted 2023-04-18

在css文件中定义一个全局的
<style>
*
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;

</style>

--------------------------------------------------------
页面调用了上面的css文件后

<span style="font-size: xx-large">
<span style="color: #ff0000;">AAAAAAAAAAA</span>
</span>

这样子的话AAAAAAAAAAA的font-size还是全局css中的值
而如果按下面的话AAAAAAAAAAA的font-size才是span中的值，但我是想要上面那段代码也能让AAAAAAAAAAA的font-size为span中重新设置的值

<span style="color: #ff0000;">
<span style="font-size: xx-large">AAAAAAAAAAAA</span>
</span>

再补充一下：
我这段代码是将编辑器中输入的值保存到数据库中
这样保存到数据库中的值就是 <span style="font-size: xx-large"><span style="color: #ff0000;">AAAAAAAAAAA</span></span>这样的
然后从数据库中取出来也就是这样，但是这样就会与全局定义的css冲突而造成重新设置的字体大小无效

参考技术A 你这样设置会有很多问题的，建议你这样设置：

body,td,div,p,th
font-size:12px;

这样就不会影响到span了

参考资料：http://www.po-soft.com/blog/listly/220.html

参考技术B 外部样式应该不要<style></style>吧？直接写内容就可以吧：

*
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
参考技术C 这样的代码是取后者的，你可以试着把两段代码写成一段，或再设定一个CSS！！本回答被提问者采纳 参考技术D 这是*这样定义常有的问题 css开发中 尽量避免用*定义全局的css 建议用其他的方法修改 第5个回答  2009-08-08 新建css规则没？区别于全局的

为啥子组件样式被全局 css 覆盖？

【中文标题】为啥子组件样式被全局 css 覆盖？

【英文标题】：why child component styles overwriting by global css?为什么子组件样式被全局 css 覆盖？

【发布时间】：2017-03-02 14:17:31

【问题描述】：

我在我的 index.html 中导入了一个基本 css 文件，其中包括宽度为 auto，但这种样式优先于我使用 styleUrls 在组件中定义的样式（使用宽度为 70%）：[“...” ]。确保我的组件范围的 css 优先于传统方式定义的样式的最佳方法是什么？我是否应该将全局样式限定为***组件？

【问题讨论】：

请分享您的代码。

【参考方案1】：

通常，组件中的 css 是具有优先权的。你可以尝试使用

封装：在你的 app.component 中查看Encapsulation.None。

如果您的组件中有一个类，它将具有优先权。

https://angular.io/docs/ts/latest/guide/component-styles.html

【参考方案2】：

您可以在全局 css 中增加选择器的特异性。

当你有你的<my-comp class="some-class">

.someClass 
  width: 70%;

然后你可以覆盖

body .some-class.some-class 
  width: 100%;

或

body my-comp.some-class.some-class 
  width: 100%;

增加选择器特异性的最佳方式取决于您的具体要求。

https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

【参考方案3】：

为了覆盖全局 scss，只需在 component.ts 文件中添加以下行 (encapsulation: ViewEncapsulation.None)：

  @Component(  selector: 'app-custom-component',
      templateUrl: './custom-component.component.html',
      styleUrls: ['./custom-component.component.scss'],
      encapsulation: ViewEncapsulation.None
    )