Question

目前我的LESS和CSS存在一个问题，即在覆盖文件之前调用Bootstrap.less，但第一次导入会覆盖CSS ..

举个例子，假设我的bootstrap.less文件如下所示：

/* ALL STANDARD BOOTSTRAP LESS FILE HERE*/

// Generic Widget Styles
@import "components/_widget-styles.less";

// Header Area
@import "components/_header-area.less";

// Global Search Spinner
@import "components/_search-spinner.less";

// Smart Feed
@import "components/_smart-feed.less";

// Home Page Container
@import "components/_home-container.less";

// Footer
@import "components/_footer.less";

// Documents Page Container
@import "components/_documents.less";

我的Generic Widgets样式有一些样式可以在整个站点和主页容器中使用和覆盖我只是这样，它工作正常，但由于某种原因我必须使用！important来覆盖任何样式做imo并不是一件好事。它应该使用最后一种样式添加到CSS文件中吗？

Answer 1

它应该使用最后一种样式添加到CSS文件吗？

仅当两个选择器具有相同的特异性时。

如果只能使用!important覆盖样式规则，则选择器的css特性不够高。例如：

HTML：

<div class="main"><h1>Test</h1></div>

的CSS：

.main h1 {color: red;}
h1 {color: blue;}

由于.main h1具有比h1更高的特异性，上面将显示红色而不是蓝色的文字。使用！import会起作用，但会被认为是不好的做法。不要使用!important，而应使用Less代码中具有更高特异性的选择器来覆盖。

例如，以下CSS将解决它（相同的特异性）：

.main h1 {color: red;}
.main h1 {color: blue;}

特殊性规则可在以下网址找到：http://css-tricks.com/specifics-on-css-specificity/

LESS和CSS进口 - 疯狂

1 个答案: