覆盖样式而无法使用！重要或相同的属性名称

Question

我有两个不同的css文件（master.css，custom.css）。 在master.css上定义了一些样式（例如#largediv { width ：100px;}）

我可以在custom.css上覆盖属性 width 而不使用！important或使用相同的属性名称（宽度）吗？

我使用的是Joomla，master.css是核心文件，因此无法编辑。

Answer 1

您可以使用具有更高特异性的CSS规则。例如，custom.css中的body #largediv {}将覆盖master.css中#largediv的任何提及。

特异性是CSS最不了解的原则之一。有关详细信息，请访问：https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

Answer 2

取决于在加载master然后自定义的情况下如何加载css文件，渲染的css将反映最新值。示例：

#largediv{width: 50px; border:1pt solid red;}/*master.css*/
#largediv{width: 100px; border:1pt solid blue;}/*custom.css*/

<div id="largediv"></div>

Answer 3

您可以将类添加到特定元素。因此，custom.css具有更精确的元素路径。像这样：

HMTL

<div id="largediv" class="inCustomCss"></div>

CSS：

.inCustomCSS {
     your css style.
    } 

Answer 4

如果你在custom.css中写#largediv {width: 567px;}并且在master.css（我假设的）之后加载了custom.css，那么你将覆盖该属性。