1

目前我有

<div class="rightBoxesTop">
   <h3>My Pages</h3>
   <h3 style="line-height: 8px; width: 80px; font-size: 80%; margin-top: 7px;">
         show in-active <input id="show-in" type="checkbox"></h3>
</div>

我想将内联样式移至 CSS。这是第二个 H3 的唯一方法一个 id 还是有一种方法可以引用类 rightBoxesTop 并使用类似第二个的东西？另外，如果您能告诉我这种样式是什么，那么我可以搜索有关如何正确使用它的关键字

谢谢

4

4 回答 4

3

您可以尝试设置第 2、第 3 和其他以下h3标签的样式：

.rightBoxesTop h3 + h3
{
    line-height: 8px; width: 80px; font-size: 80%; margin-top: 7px;
}

您也可以使用 CSS3 选择器来设置第二个样式h3：

.rightBoxesTop h3:nth-child(2)
{
    line-height: 8px; width: 80px; font-size: 80%; margin-top: 7px;
}
于 2012-10-12T13:32:50.900 回答
1

如果您能够删除内联样式，那么您还可以为其添加一个类。

这使您可以选择通过其在 CSS 中的类轻松设置样式。

更新：因为您必须删除内联样式，所以不能在 CSS 中覆盖它们。

于 2012-10-12T13:52:11.457 回答
0

您可以使用选择器div.rightBoxesTop h3 + h3。它只会对前面有另一个 h3 元素的 h3 元素进行样式设置。这确实意味着，如果你有更多它们，它们都会被样式化，除了第一个。

但在这种情况下，我会考虑向第二个 h3 添加一个类（而不是一个 id）。

于 2012-10-12T13:35:08.180 回答
0

您可以.rightBoxesTop h3+h3{}按照人们的建议使用，但要小心，如果您添加另一个 h3，最后 2 个 h3 将具有该样式，或者如果您在 .rightBoxesTop 内创建另一个具有多个 h3 的 div，它们也会获得该样式，所以精确方式是：

.rightBoxesTop>h3:first-child+h3{
//your css here
}

这意味着“第一个孩子的（>”意味着直接孩子，所以如果有更多的嵌套级别，他们不会计算在内）下一个 h3，将获得 css“

于 2012-10-12T13:40:48.497 回答