如何在内联样式中添加nth-child（）样式？ [英] How to add nth-child() style in inline styling?

问题描述

在向元素（其中显然包含多个元素）应用内联样式时，如何添加 nth-child（n）声明。

How can I add a nth-child(n) declaration while applying inline styles to an element (which, obviously, contains multiple elements).

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

For example, suppose I have a div that contains three p elements.

一般的样式表规则如下：

The general stylesheet rules would go like this:

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

但是如何在应用内联样式时包含 div ？

But how can I still colour the second paragraph blue while applying an inline style to the containing div?

推荐答案

内联样式属性仅适用于元素与属性。例如，如果您在 div 上有一个样式属性，样式将仅适用于 div 属性和冲突样式）。您不能使用另一个元素上的内联样式属性来定位不同的元素。

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.

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

Even if you apply a style attribute onto a p element, you can't make the inline styles apply conditionally based on a pseudo-class. See my answer to this question for 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.

这篇关于如何在内联样式中添加nth-child（）样式？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！