能否通过CSS选择器基于元素的内联样式属性选择元素？

答案是肯定的，但这类选择器有严格的匹配规则，不是随便写就能生效的。

完全匹配的属性选择器 #

你给出的例子里有两个问题：一是拼写错误（HTML里是color，选择器写了colour），二是内容不完全一致（HTML的style里有末尾的分号，选择器里没有）。如果要完全匹配内联style属性的内容，选择器的字符串必须和元素的style属性值完全一模一样，包括空格、标点、属性顺序。

比如对应HTML：

<div style="color: red;"></div>

正确的完全匹配选择器是：

div[style="color: red;"]

更灵活的部分匹配选择器 #

如果不想严格完全匹配，可以用CSS的部分匹配属性选择器，适配不同的场景：

• div[style*="color: red"]：匹配style属性中包含color: red字符串的元素，不管前后有没有其他样式代码
• div[style^="color: red"]：匹配style属性以color: red开头的元素
• div[style$="color: red;"]：匹配style属性以color: red;结尾的元素

注意事项 #

• 这类选择器是基于字符串匹配，不是基于元素实际渲染的样式。比如如果元素style里写的是color: #ff0000;，哪怕实际显示红色，div[style*="color: red"]也无法匹配它。
• 内联样式本身优先级极高，用这类选择器去覆盖样式时，可能需要加!important，但更推荐用类选择器来管理样式，避免依赖内联样式的选择器，让代码更易维护。

内容的提问来源于stack exchange，提问作者Andrew Foulds