Question

如何在将内联样式应用于元素（显然包含多个元素）时添加nth-child(n)声明。

例如，假设我有div，其中包含三个p元素。

一般样式表规则如下：

div p:nth-child(2) {
  color: blue;
}

但是，如果将内联样式应用于包含div的内容，我仍然可以将第二段颜色设置为蓝色？

Answer 1

内联样式属性仅适用于具有该属性的元素。因此，例如，如果div上有样式属性，则样式将仅适用于div（尽管有继承属性和冲突样式）。您不能使用另一个元素上的内联样式属性来定位其他元素。

即使将样式属性应用于p元素，也无法根据伪类有条件地应用内联样式。请参阅我对this question的回答。但是，如果动态生成标记，您可以使用类似的逻辑控制样式属性是否首先打印，但这超出了您的问题范围。

Answer 2

假设您希望将nth-child(n)声明应用为内联样式的原因是因为您无法编辑CSS文件或者不想;但您需要直接在页面上应用样式，您可以尝试在相关div旁边添加<style>标记：

<style>
  div.myContainer p:nth-child(2) {
    color: blue;
  }
</style>
<div class="myContainer">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>

我应该注意：这不是构建代码的理想方式。应将样式和HTML /内容分开，以创建格式正确的语义标记。

此外，如果您必须在多个地方应用此样式，它可能会变得混乱和/或不一致。但是，据我所知，有时您必须根据项目制作例外。

Answer 3

li:nth-child(10n-2) {
    background: red;
}

这是我的源代码的基础！

如何在内联样式中添加nth-child（）样式？

3 个答案: