Question

我的CSS继承存在问题。这是我的样式表的简化版本，我试图控制我的web-app的嵌套div中的字体大小：

CSS：

.type-small {
    font-size: 24px;
}
.type-large {
   font-size: 48px;
}

.type-small .btn {
   font-size: 24px;
   height: 28px;
}
.type-large .btn {
   font-size: 48px;
   height: 82px;
}

当您查看此示例HTML时，最里面的type-small不会用于格式化“保存”按钮。看起来CSS正在拾取类，而不管嵌套在HTML中的哪个更深。

HTML

<div class="type-small">
  <div class="type-large">
    <button class="btn">Refresh</button>
    <div class="type-small">
      <p>Sample info </p>
      <button class="btn btn-inverse">Save</button>
    </div>
  </div>
</div>

看一下这个JSFiddle的交互式版本。是否有任何CSS的安排可以使这项工作（大规模）？

http://jsfiddle.net/HA5zy/

Answer 1

的继承（特异性）

.type-large .btn { /* line 29 */
    font-size: 48px;
    height: 82px;
}

大于

.type-small .btn { /* line 25 */
    font-size: 24px;
    height: 28px;
}

当你提到时“CSS正在拾取类，而不管嵌套在HTML中的哪个更深。”，这不是它的工作方式。

为了缩短它，因为你的2个声明具有相同的权重，在你的css文件中写的AFTER优先并被应用。

您可以通过更具体地说明您的声明来纠正您的情况：

.type-small .btn, .type-large .type-small .btn { /* enhence the weight */
    font-size: 24px;
    height: 28px;
}

注意不要使用if！important，并且迟早会引起另一种问题，例如在你的.type-small内部有一个.type-large的对面html构造。 / p>

另一件事，这一点是由用户Lucky Soni提出的，您应该考虑使用最少的标记进行构建。意思是，您的整个HTML可以重新格式化为：

<button class="type-large btn">Refresh</button><br/>
<p class="type-small">Sample info </p><br/>
<button class="type-small btn">Save</button>

jsFiddled here

有关详细信息和更好地理解级联样式，请参阅http://www.w3.org/TR/CSS2/cascade.html#specificity。

6.4.1级联顺序

要查找元素/属性组合的值，请使用用户代理   必须应用以下排序顺序：

查找适用于目标媒体类型的相关元素和属性的所有声明。声明适用于   关联的选择器匹配有问题的元素和目标   medium匹配包含所有@media规则的媒体列表   声明和样式表所在路径上的所有链接   到了。

根据重要性（正常或重要）和来源（作者，用户或用户代理）进行排序。按升序排列：



用户代理声明

用户正常声明

作者正常声明

作者重要声明

用户重要声明



根据选择器的特异性对具有相同重要性和原点的规则进行排序：更具体的选择器将覆盖更一般的选择器。   伪元素和伪类被视为普通元素和   分别为。

最后，按指定顺序排序：如果两个声明具有相同的权重，来源和特异性，则后者指定胜出。   导入样式表中的声明被认为是在任何声明之前   样式表本身的声明。

Answer 2

为什么只使用额外的标记来应用这些简单的类？

修改您的标记，如：

<div class="type-small">
    <button class="type-large btn"></button>
</div>

CSS：

.type-small {
 font-size: 24px;
}
.type-large {
 font-size: 48px;
}

.type-small.btn {
 font-size: 24px;
 height: 28px;
}
.type-large.btn {
 font-size: 48px;
 height: 82px;
}

小提琴：http://jsfiddle.net/z7nzv/1/

Answer 3

.type-small {
    font-size: 24px;
}
.type-large {
   font-size: 48px;
}

.type-small>.btn {
   font-size: 24px;
   height: 28px;
}
.type-large>.btn {
   font-size: 48px;
   height: 82px;
}

只需指定.btn是带有'＆gt;'的.type-x的直接子项。

Answer 4

将您的第三课改为:(注意添加“按钮”）

.type-small button.btn {

Answer 5

像这样添加！important属性：

.type-small .btn {
    font-size: 24px!important;
    height: 28px!important;
}

字体大小的类和嵌套的html

CSS：

HTML

5 个答案: