内联样式属性的 CSS 选择器-前端问题

CSS selector by inline style attribute(内联样式属性的 CSS 选择器)

本文介绍了内联样式属性的 CSS 选择器的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

Is there a CSS selector to select this element by its inline style attribute value?

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

类似

div[cssAttribute=cssValue]

推荐答案

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

The inline style attribute is no different to any other HTML attribute and can be matched with a substring attribute selector:

div[style*="display:block"]

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

It is for this very reason however that it's extremely fragile. As attribute selectors don't support regular expressions, you can only perform exact substring matches of the attribute value. For instance, if you have a space somewhere in the attribute value, like this:

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

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

It won't match until you change your selector to accommodate the space. And then it will stop matching values that don't contain the space, unless you include all the permutations, ad nauseam. But if you're working with a document in which the inline style declarations themselves are unlikely to change at all, you should be fine.

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

Note also that this is not at all selecting elements by their actual specified, computed or used values as reflected in the DOM. That is not possible with CSS selectors.

这篇关于内联样式属性的 CSS 选择器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！