从外部资源覆盖 CSS答案

【问题标题】：Override CSS from external resource从外部资源覆盖 CSS
【发布时间】：2020-03-04 01:17:50
【问题描述】：

我正在从 NG-Bootstrap 分页组件构建分页。我想更改（实际上删除）一些在 NG-Bootstrap 库中声明的 CSS。如何在不更改 NG-Bootstrap 样式表的情况下做到这一点。

如上图所示，我想忽略 .pagination 中声明的 padding-left:0。我不需要为它添加另一个值。我只想忽略它。可能吗 ... ？

【问题讨论】：

【解决方案1】：

要回答您的问题，不，您不能忽略 CSS 样式规则。但是您可以在不更改 NG-Bootstrap 样式表的情况下覆盖它。

您可以通过几种不同的方式将 CSS 规则附加到 HTML 文档，以下是最常用的：

链接到外部样式表，通过在 HTML 文档的 <head> 部分添加 <link> 标记：

<head> <link rel="stylesheet" href="mystylesheet.css" /> </head>
使用<style>标签将CSS嵌入到您的HTML文档中：

<style> background-color: blue; </style>
使用 style 属性直接将 CSS 内联添加到单个 HTML 元素：

<div style="background-color:gray;"></div>

根据您的操作方式，将根据优先级应用不同的样式。内联优先于嵌入，嵌入优先于链接样式表。

例如，如果您在内联特定元素上指定灰色背景，并在嵌入样式部分中为同一元素指定蓝色背景，则内联获胜并且背景将为灰色。

因此，根据您的情况，您可以嵌入 CSS 或将其内联到要更改的元素上。执行其中任何一个都将覆盖 NG-Bootstrap 样式表中的内容而不更改它。

【讨论】：