Html 如何在内联样式中添加 nth-child() 样式？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25646683/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to add nth-child() style in inline styling?
提问by Abhimanyu
How can I add a nth-child(n)declaration while applying inline styles to an element (which, obviously, contains multiple elements).
如何nth-child(n)在将内联样式应用于元素（显然包含多个元素）时添加声明。
For example, suppose I have a divthat contains three pelements.
例如，假设我有一个div包含三个p元素的。
The general stylesheet rules would go like this:
一般的样式表规则是这样的：
div p:nth-child(2) {
color: blue;
}
But how can I still colour the second paragraph blue while applying an inline style to the containing div?
但是如何在将内联样式应用于包含的同时将第二段着色为蓝色div？
采纳答案by BoltClock
An inline style attribute only pertains to the element with the attribute. So for example, if you have a style attribute on a div, the styles will only apply to that div(inherited properties and conflicting styles notwithstanding). You cannot target a different element using an inline style attribute on another element.
内联样式属性仅与具有该属性的元素有关。因此，例如，如果您在 a 上有一个 style 属性div，则样式将仅适用于该div属性（尽管有继承的属性和冲突的样式）。您不能使用另一个元素上的内联样式属性来定位不同的元素。
Even if you apply a style attribute onto a pelement, you can't make the inline styles apply conditionally based on a pseudo-class. See my answer to this questionfor why. However, if the markup is dynamically generated, you can control whether or not the style attribute gets printed in the first place using similar logic, but that is outside the scope of your question.
即使将样式属性应用到p元素上，也无法根据伪类有条件地应用内联样式。请参阅我对这个问题的回答以了解原因。但是，如果标记是动态生成的，您可以使用类似的逻辑控制是否首先打印样式属性，但这超出了您的问题范围。
回答by Kevin Vess
Assuming the reason you want to apply the nth-child(n)declaration as an inline style is because you can't edit the CSS file or don't want to; but rather you need to apply your styling directly on the page, you could try just adding a <style>tag next to the div in question:
假设您想将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>
I should note: this is not the ideal way to structure your code. Styles and HTML/content should be separated to create properly formatted and semantic markup.
我应该注意：这不是构建代码的理想方式。样式和 HTML/内容应该分开，以创建格式正确的语义标记。
Also, if you have to apply this styling in more than one place, it can become messy and/or inconsistent. However, I understand that sometimes you have to make exceptions depending on the project.
此外，如果您必须在多个地方应用此样式，它可能会变得混乱和/或不一致。但是，我知道有时您必须根据项目进行例外处理。
回答by Subraa PD
li:nth-child(10n-2) {
background: red;
}
This is the base for my source code!
这是我的源代码的基础！
