字体大小类和嵌套 html

Question

我遇到了 CSS 继承问题。这是我的样式表的简化版本，我试图控制我的网络应用程序嵌套 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 结构。

另一件事，用户 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 是带有 '>' 的 .type-x 的直接子级。

Answer 4

将您的第三类更改为：（注意添加了“按钮”）

.type-small button.btn {

Answer 5

像这样添加 !important 属性：

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