css - 如何覆盖 local.xml 中的 Bootstrap 声明

Question

我制作了一个自定义的 css 文件 rtl.css 来将我商店的布局方向从从左到右更改为从右到左。并将其加载到我的 local.xml 中覆盖我商店中的所有样式表。但是这个文件本身被 bootstrap.css 覆盖了？我通过使用 Firebug 注意到我修改的属性正在被继承

如何防止 bootstrap.css 执行此操作？

Answer 1

这是因为样式表的级联特性。 CSS 级联为每个样式规则分配权重。当多个规则适用时，权重最大的规则优先。

To find the value for an element/property combination, user agents must apply the following sorting order:

Find all declarations that apply to the element and property in question, for the target media type. Declarations apply if the associated selector matches the element in question and the target medium matches the media list on all @media rules containing the declaration and on all links on the path through which the style sheet was reached. Sort according to importance (normal or important) and origin (author, user, or user agent). In ascending order of precedence: user agent declarations user normal declarations author normal declarations author important declarations user important declarations Sort rules with the same importance and origin by specificity of selector: more specific selectors will override more general ones. Pseudo-elements and pseudo-classes are counted as normal elements and classes, respectively. Finally, sort by order specified: if two declarations have the same weight, origin and specificity, the latter specified wins. Declarations in imported style sheets are considered to be before any declarations in the style sheet itself.

查看更多详情 here

通过更改 local.xml 文件中的 css 声明顺序，您可以覆盖 bootstrap.css 声明，或给予样式更改高优先级。