需要一些指导来理解CSS的CSS目标

Question

经过谷歌搜索后，我还没能找到具体的文档，说实话，我不知道如何在没有得到无关回应的情况下说出这个问题，因为我不知道是什么我正在寻找的项目的名称被称为。在我看来，我称之为元素/类选择器。

将特定元素定位到样式时，由于样式不适用，我并不总能得到我想要的结果。例如，在这样的事情：

<div class=box>
    <div class=smallerbox>

        <div class=something>It has some text in it</div>

    <div>
</div>

现在我想能够用CSS编辑看起来像这样：

.something {color:#FFF}

但有时它不起作用，我必须这样做：

.box .smallerbox .something {color:#FFF}

现在问题是我并不总是确定要回去多久，最后我会添加额外的东西，我不需要或浪费时间因为我不完全明白我在做什么。添加!important并不总是有效。

我认为我必须这样做的原因是因为我正在使用bootstrap.css，这样我必须专门定位该类，否则它将被父类样式覆盖。

我这样思考是否正确？

任何通过随机指南和文档来避免学习HTML / CSS / Javascript / PHP的疯狂的提示或方法都将非常感激。

Answer 1

.box .smallerbox .something {color:#FFF}

表示将color : #FFF提交到something内的smallerbox，box保留在something内，因此，这仅适用于以下名为<!-- box | | |-------smallerbox | | |-------something <= make this white --> 的div

.something {color:#FFF}

但是当你说：

something

这意味着，任何css没有为其定义{{1}} ...检查这个小提琴是为了更好地理解

Fiddle here

Answer 2

您所指的是类/ CSS特异性。这是理解的良好开端：http://www.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/

但是你可以在网上看到很多其他文章。

基本上，经验法则是不要过度限定选择器（即使用所需的最小值）。这样，如果您稍后需要覆盖样式，则可以稍微更具体一些，或者添加一个额外的类来为现有样式添加/覆盖样式。

当您将样式引用嵌套太多时，很快就会成为管理的噩梦，您必须不惜一切代价避免!important。如果CSS正确完成，则不需要它。

有些库可以设置具有某些类名的样式，有些可以使用长链，因此命名类也成为一项艰巨的任务。但是，只要你先加载你的CSS并且之后加载你的CSS，大多数都不应该干涉太多。