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

【问题标题】：CSS selector for element within element with inline style?具有内联样式的元素内元素的CSS选择器？
【发布时间】：2012-12-17 20:40:27
【问题描述】：

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

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

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

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

【问题讨论】：

视情况而定。您是只对内联样式属性的存在感兴趣，还是需要通过特定的内联样式进行选择？仅通过属性进行选择既简单又可靠，但具有特定的内联样式......不是那么多，除非您可以控制标记。

【解决方案1】：

使用：

p[style] span {
  color: red;   
}

【讨论】：

【解决方案2】：

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

然而这很丑。

【讨论】：

【解决方案3】：

茶会有点晚了，但我想我会分享我找到并使用的解决方案。

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

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

"*=" 表示“匹配属性中任意位置的下列值价值。”

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

CSS 选择器上的瘦身

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

【讨论】：

【解决方案4】：

如果您想将样式应用于特定的规则声明，您也可以使用 style*。这将匹配所有具有内联样式的元素，而不管应用的值如何。

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

【讨论】：