CSS选择器的内联样式属性

114

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

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

就像是

div[cssAttribute=cssValue]

html css css-selectors inline-styles

— 永恒精华
source

190

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

div[style*="display:block"]

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

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

在您更改选择器以适应空间之前，它不会匹配。然后，它将停止匹配不包含空格的值，除非您包括所有排列，即恶作剧。但是，如果您正在处理内联样式声明本身根本不可能更改的文档，那应该没问题。

还要注意，这根本不是按照DOM中反映的实际指定，计算或使用的值来选择元素。这是不可能的CSS选择器。

— BoltClock
source

即使需要，也很糟糕，对此没有真正的解决方案。

— BoltClock

如果您能告诉我们您为什么需要这样做，那么我们可能可以提供更多帮助

— 被腐蚀

我会给你一个例子，说明什么时候有用。我正在编写Selenium Web驱动程序测试，不能/不希望更改测试中的实际代码。我需要通过样式显示来识别特定的自动完成功能（有几个隐藏的功能），因为代码没有提供唯一的ID或父级结构-它们可能会转储到回调的<body>中。但是，是的，就像您指出的那样，它很脆弱。

— 安德桑

如果您在页面上使用google翻译栏，我已经非常需要它，因为它在页面顶部添加了固定的div-并且我们的导航已经固定。此技术使我们可以根据导航栏是否可见来移动导航栏。翻译栏具有静态类，唯一改变的是其显示样式。

— Jag

@andersand：在对我的答案进行了差不多足够的评论之后，我终于可以更新它了。在编写原始答案时，我没有想到过Selenium，我同意它是内联样式属性选择器最突出的用例之一。

— BoltClock

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

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

— 贝特朗
source

这是因为该属性style必须与HTML属性完全匹配

— RousseauAlexandre

@RousseauAlexandre添加“;” 至少当我尝试使用“;”元素时，选择器的选择没有什么区别而不是选择器中。只要字符和空格相同，就不必包含;。

— Maxie Berkmann