Font-size类和嵌套的html

Question

我有一个关于CSS继承的问题。这是我的样式表的一个简化版本，我试图在我的web应用程序的嵌套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;
}

当您查看此示例超文本标记语言时，最内层的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中嵌套得更深。“好吧，事情不是这样的。

简而言之，因为您的两个声明具有相同的权重，所以在css文件中之后编写的声明将优先并被应用。

您可以通过为您的声明指定更多细节来纠正您的情况，如下所示：

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

请注意，不鼓励使用if !important，它迟早会导致另一种问题，比如使用oposite html结构，在.type-small中使用.type-large。

还有一件事，这一点是由用户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级联顺序

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

查找适用于目标媒体类型的相关元素和属性的所有声明。如果关联的选择器与相关元素匹配，并且目标媒体与包含声明的所有@media规则上的媒体列表以及到达样式表的路径上的所有链接上的媒体列表匹配，则应用声明。

根据重要性(普通或重要)和来源(作者、用户或用户代理)进行排序。按优先级升序排列：

重要用户代理declarations

• user normal declarations

• author declarations

• author重要declarations

• user重要声明

根据选择器的特异性对具有相同重要性和来源的规则进行排序:更具体的选择器将覆盖更通用的选择器。伪元素和伪类分别被计为普通元素和类。

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

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是.type-x的直接子类型即可。