19

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

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

一般样式表规则如下所示：

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

但是，如何在将内联样式应用于包含时仍将第二段着色为蓝色div？

4

3 回答 3

15

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

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

于 2014-09-03T14:28:25.700 回答
7

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

<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/内容应该分开以创建格式正确的语义标记。

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

于 2014-09-03T14:48:22.797 回答
-5 
li:nth-child(10n-2) {
    background: red;
}

这是我的源代码的基础！

于 2018-01-12T06:36:50.660 回答