Question

假设我有这张表：

<table class="live_grid">
    <tr>
        <td>
            <h3>Something!</h3>
        </td>
    </tr>
</table>

如果我想在表格中设置<h3>的样式，我可以使用这个CSS选择器：

.live_grid h3 {

}

这很好用。如果我要为该表中的所有标题设置样式，则会出现问题。我试过这个：

.live_grid h1,h2,h3,h4,h5,h6 {

}

这似乎与我的表中不的标题匹配live_grid类。

我确信这是一个简单的问题，就在我面前。你能指出我做错了吗？

Answer 1

标准选项：

如果要为该类中的所有标题设置样式，则必须这样做（这也可以在没有换行符的情况下完成）。请注意每个选择器中都有.live_grid：

.live_grid h1,
.live_grid h2,
.live_grid h3,
.live_grid h4,
.live_grid h5,
.live_grid h6 {
    /* style here */
}

当你用逗号分隔时，它们彼此独立 - 因此需要再次引用该类。

例如：

#myDiv1, .live_grid, #myDiv2 {
    color: blue;
}

这会为#myDiv1元素中的所有内容，#myDiv2元素中的所有内容以及.live_grid元素中的所有内容设置文本颜色为蓝色。

这也解释了你的CSS匹配所有标题的原因 - 你是单独引用它们，用逗号分隔 - 它们的包含元素没有选择器。

CSS预处理器选项

或者，您可以随时使用 LESS 或 SASS ，这样您就可以编写如下嵌套规则：

#live_grid {
    h1, h2, h3, h4, h5, h6 {
        /* style here */
    }
}

自定义类选项

最后，您可以为所有标题添加一个类，只需引用该类：

<-- HTML -->
<h1 class="custom-header">Title of Blog Post</h1>
<h2 class="custom-header">Subtitle of Blog Post about Pizza</h2>

/* CSS */
.custom-header {
    /* style here */
}

Answer 2

代码

  .live_grid h1,h2,h3,h4,h5,h6 {}

只会选择.live_grid中的h1。使用

.live_grid h1,.live_grid h2,.live_grid h3,.live_grid h4,.live_grid h5,.live_grid h6 {}

来自Adam Roberts的“Selector Grouping”：

我们可以将逗号视为逻辑OR运算符，但重要的是要记住组中的每个选择器都是自治的。一个常见的初学者的错误是写这样的组：

#foo td, th {
⋮ declarations
}

初学者可能会认为上述声明块将应用于ID为“foo”的元素后代的所有td和th元素。但是，上面的选择器组实际上等同于：

#foo td {
⋮ declarations
 }
th {
⋮ declarations
}

要实现真正的目标，请按如下方式编写选择器组：

 #foo td, #foo th {
 ⋮ declarations
 }

Answer 3

.live_grid h1,
.live_grid h2,
...

你明白了

Answer 4

试试这个：

.live_grid h1,
.live_grid h2,
.live_grid h3,
.live_grid h4,
.live_grid h5,
.live_grid h6 {}

Answer 5

不幸的是，您需要单独定位每个标题，或者只是为其分配一个类。

.live_grid h1,
.live_grid h2,
.live_grid h3,
.live_grid h4,
.live_grid h5,
.live_grid h6 {
}

我只是为标题指定一个类，或者具体说明您实际想要定位的标题。

Answer 6

每个标题标签必须是合格的：

.live_grid h1, .live_grid h2, .live_grid h3, .live_grid h4, .live_grid h5, .live_grid h6

Answer 7

这是关于CSS的糟糕之处。如果你想要减少CSS，你可以使用http://sass-lang.com/，它看起来像：

.live_grid {
  h1, h2, h3, h4, h5, h6 {
    /* styles here */
  }
}

Answer 8

 .live_grid h1,
 .live_grid h2,
 .
 .
 .

 .live_grid h6 { //now add your style here }

Answer 9

另一个解决方案可能是为你的html标记添加一个特殊的类，然后在你的CSS中，你可以写下这样的东西：

多个子元素的CSS选择器

9 个答案: