CSS文件类格式混乱

Question

我花了整整一天的时间试图弄清楚为什么我的页面中没有应用bootstrap样式，最后注意到样式甚至没有被应用。这似乎是因为我的css文件中的样式格式为：

.cms-bootstrap .col-lg-2{
...
}

我试图像这样应用它们

<div class="col-lg-2">hello</div>

我正在处理的网站非常庞大，我们有第三方公司提供主要样式，还有其他几个75k样式文件，因此需要进行一些调查才能找到原因。

我需要应用网格样式，以便我可以在页面上正确定位一些元素。

如果我应用这样的样式：

<div class="cms-bootstrap>
<div class="col-lg-2">hello</div>
</div>

然后一切都很好，风格也正确应用。

有人可以解释一下所需的外部div的意义吗？我可以看到CSS文件中定义的2个类之间的连接我只是不知道它们是什么，并且无法在任何地方找到解释。

Answer 1

这是因为.cms-bootstrap .col-lg-2标识了嵌套的`div。

因此，如果子div不在该特定父级内，则不会将样式规则应用于该父级。

您应该将此作为参考：

  

元素，例如'p'选择所有'p'元素

  

元素，元素，例如'div，p'选择所有'div'元素和   所有'p'元素

元素元素，例如div p选择全部   'div'元素中的'p'元素

元素＆gt;元素   例如div> p选择父元素为'div'的所有'p'元素   元素

元素+元素，例如div + p选择所有'p'   紧接在'div'元素之后放置的元素

  

element1~element2 ，例如p~ul选择每个'ul'元素   之前是'p'元素

取自W3schools

Answer 2

看起来提供CSS的第三方已经将.cms-bootstrap类中的所有内容都包装好了，可能会阻止Bootstrap干扰网站上的其他样式（通常是管理区域）。

这是一个任意的类，因此不会有任何文档 - 您需要将.cms-bootstrap类添加到body标记以获取您的内容引导风格。

Answer 3

首先，如果css规则的布局类似于.cms-bootstrap .col-lg-2{，则意味着最左边的一个是包装器而右边的是其子节点。

因此，为了影响这个类，它必须是cms-bootstrap的孩子。

现在对于cms-bootsrtrap类实际上只为cms中的后端样式而设，你可以在响应cms＆amp; windu，他们使用自举来为后端设计风格。