具有内联样式的元素内的元素的CSS选择器？

Question

是否有一个CSS选择器来定位具有内联样式的元素？那么我可以仅使用CSS来定位第一个跨度而不是第二个跨度吗？

如果没有,可以用jQuery完成吗？

<p style="text-align: center;">
    <span>target</span>
</p>

<p>
    <span>not target</span>
</p>
?

Answer 1

茶会有点晚了,但我想我会分享我找到和使用的解决方案.

如果你能完全匹配样式属性,@ simone的答案是完美的.但是,如果您需要定位可能具有与之关联的其他内联样式的内联样式属性,则可以使用:

p[style*="text-align:center;"]

"*="表示"在属性值的任何位置匹配以下值".

有关其他选择器的更多详细信息,请参阅css-tricks.com上的此博客文章:

瘦选择CSS选择器

http://css-tricks.com/attribute-selectors/#rel-anywhere

Answer 2

p[style="text-align: center;"] {
  color: red;
}

然而这很难看.

Answer 3

如果您想将样式应用于特定规则声明,您还可以使用样式*.无论应用的值如何,这都将匹配具有内联样式的所有元素.

div[style*="background-image"] {
  background-size: cover;
  background-repeat: no-repeat;
}