Question

目前我有

<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并使用某些东西像第二个东西？另外，如果你能告诉我这种造型是什么，那么我可以搜索关于如何正确使用它的关键词

由于

Answer 1

您可以尝试使用此样式设置第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;
}

Answer 2

如果你能删除内联样式，那么你也可以为它添加一个类。

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

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

Answer 3

您可以使用选择器div.rightBoxesTop h3 + h3。它将仅设置前面有另一个h3元素的h3元素。这意味着，如果你有更多这些，他们都将被设计，除了第一个。

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

Answer 4

你可以像人们建议的那样使用.rightBoxesTop h3+h3{}，但是要小心，如果你添加另一个h3，那么最后2个h3会有那个样式，或者如果你在.rightBoxesTop中创建了另一个div，它有超过h3的，他们会得到造型也是如此，所以一个精确的方法是：

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

这意味着“第一个孩子（”＆gt;“表示直接孩子，所以如果有更多嵌套级别他们将无法计算）下一个h3，将获得css”

样式在div中只有一个元素

4 个答案: