内联样式属性的 CSS 选择器答案

【问题标题】：CSS selector by inline style attribute内联样式属性的 CSS 选择器
【发布时间】：2012-01-15 15:31:46
【问题描述】：

是否有 CSS 选择器可以通过其内联样式属性值选择此元素？

<div style='display:block'>...</div>

类似

div[cssAttribute=cssValue]

【问题讨论】：

【解决方案1】：

内联 style 属性与任何其他 HTML 属性没有什么不同，可以与子字符串属性选择器匹配：

div[style*="display:block"]

正是由于这个原因，它非常脆弱。由于属性选择器不支持正则表达式，您只能对属性值执行 exact 子字符串匹配。例如，如果您在属性值的某处有一个空格，如下所示：

<div style='display: block'>...</div>

在您更改选择器以适应空间之前，它不会匹配。然后它将停止匹配不包含空格的值，除非你包含所有排列，令人作呕。但是，如果您正在处理的文档中的内联样式声明本身不太可能发生变化，那么您应该没问题。

还请注意，这不是根据它们在 DOM 中反映的实际指定、计算或使用的值来选择元素。这在 CSS 选择器中是不可能的。

【讨论】：

即使需要，也太糟糕了，没有真正的解决方案。
我会给你一个例子来说明什么时候这很有用。我正在编写 Selenium Web Driver 测试，并且不能/不想更改测试中的实际代码。我需要通过样式显示来识别特定的自动完成（有几个隐藏），因为代码不提供唯一的 id 或父结构 - 它们大概在回调中被转储到。但是，是的，就像您指出的那样，它很脆弱。
我发现如果在您的页面上使用 hte 谷歌翻译栏是非常需要的，因为它会在我们页面的顶部添加一个固定的 div - 我们的导航已经固定。这种技术允许我们根据翻译栏是否可见来移动导航栏。翻译栏有静态类，唯一改变的是它的显示样式。
BoltClock 表达的震惊（'不知道为什么你会想要做这种事情'）令人难以置信的悲伤。这个问题——这个屏幕上的绿色是什么——我认为很多人可能都想知道答案。 CSSOM 未能使声明性规则集依次以声明方式（并且可质疑地）公开其应用程序，这是极端的白痴。当然，样式需要是可搜索的。
@andersand：在我的回答中获得了足够多的 cmets 之后，我终于开始更新它。在编写原始答案时，我没有考虑过 Selenium，我同意它是内联样式属性选择器最突出的用例之一。

【解决方案2】：

包括“;”对我来说效果更好。

div[style*="display:block;"]

【讨论】：

这是因为属性style必须与HTML属性完全匹配
@RousseauAlexandre 添加“;”至少当我尝试使用“;”的元素时，选择器没有任何区别在其中而不是在选择器中。只要字符和空格相同，就不需要包含;。

【解决方案3】：

始终查看属性是如何用 HTML 编写的（您可以在浏览器的“元素”选项卡中查看）。您必须使用完全相同的值。就我而言：style="left: 100%;"。而不是style="left:100%" 或类似的东西。

【讨论】：