如何在Laravel8/CoreUI3.4中仅用news.css覆盖app.css全局样式？

问题根源 #

app.css中的html *全局选择器覆盖了<strong>和<i>的默认样式，导致标签无法正常渲染。之前尝试的unset属性不符合需求——我们需要恢复标签的原生样式（<strong>加粗、<i>斜体），而非重置样式。

解决方案（无需修改app.css，仅通过news.css实现） #

步骤1：给新闻内容添加专属容器类（推荐）

在resources/views/layouts/news.blade.php中，渲染content_shortly字段的地方，给内容包裹一个带类名的容器，确保样式仅作用于新闻内容：

<div class="news-content">
    {!! $news->content_shortly !!}
</div>

步骤2：在news.css中添加高优先级样式

利用类选择器+元素选择器的更高权重，覆盖html *的全局样式，同时恢复标签的原生样式：

/* 恢复<strong>的加粗效果 */
.news-content strong {
    font-weight: bold !important;
}

/* 恢复<i>的斜体效果 */
.news-content i {
    font-style: italic !important;
}

备选方案（无需修改blade模板）

如果不想调整模板结构，可通过页面层级选择器提高优先级，比如直接针对新闻页面的全局标签：

/* 针对新闻页面的<strong>标签 */
html body strong {
    font-weight: bold !important;
}

/* 针对新闻页面的<i>标签 */
html body i {
    font-style: italic !important;
}

原理说明 #

• 选择器优先级：.news-content strong（权重0,1,0,1）高于html *（权重0,0,1,1），配合!important可确保样式生效。
• 放弃unset，直接设置标签的原生默认值（bold/italic），才能让标签正常渲染预期样式。

内容的提问来源于stack exchange，提问作者mstdmstd