Html 内联样式属性的 CSS 选择器

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/8426882/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 11:53:04  来源:igfitidea点击:

CSS selector by inline style attribute

htmlcsscss-selectorsinline-styles

提问by AgelessEssence

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

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

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

something like

就像是

div[cssAttribute=cssValue]

回答by BoltClock

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

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

div[style*="display:block"]

It is for this very reason however that it's extremely fragile. As attribute selectors don't support regular expressions, you can only perform exactsubstring 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'tcontain the space, unless you include all the permutations, ad nauseum. 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.

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

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

另请注意,这根本不是通过 DOM 中反映的实际指定、计算或使用的值来选择元素。对于 CSS 选择器是不可能的。

回答by Bertrand

Including ";" works better for me.

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

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