html - 内联样式属性的 CSS 选择器

Question

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

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

有点像

div[cssAttribute=cssValue]

Answer 1

内联 style 属性与任何其他 HTML 属性没有区别，可以与子字符串属性选择器匹配:

div[style*="display:block"]

正是由于这个原因，它才极其脆弱。由于属性选择器不支持正则表达式，您只能执行属性值的精确 子字符串匹配。例如，如果属性值中某处有空格，如下所示:

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

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

另请注意，这根本不是根据 DOM 中反射(reflect)的实际指定、计算或使用值来选择元素。 这对于 CSS 选择器是不可能的。