我可以样式一个元素，如果通用选择器有特定的属性值组合?

这是专门针对text-spacing的样式。我想将元素设置为自动高度/宽度的字母-spacing/word-spacing有一些特定的值

<span class="subjectText">this is the text</span>

通用选择器

*{
letter-spacing:1.641px;
}

所需样式

*[style*="letter-spacing:1.614px"] .subjectText{
background-color:yellow;
}

我在下面试过了，但是没有用

*[style*="letter-spacing:1.614px"] .subjectText{ background-color:yellow; }

CSS选择器将选择任何style属性值为"letter-spacing:1.614px"以及任何具有。subjecttext类的后代。但是，这在您的例子中不起作用，因为style属性不是在span元素本身上定义的，而是在通用选择器上定义的。

您可以为letter-spacing定义一个单独的类，并将其应用于文本的父元素:

.text-spacing { letter-spacing: 1.641px; } .text-spacing > .subjectText { background-color: yellow; }

已更新

简短的回答:目前有一种方法可以测试已定义CSS规则的单个属性，并使用它们的值来定义进一步的CSS规则。无论它们是用通用的还是特定的选择器定义的，CSS属性选择器机制都不包含对属性的测试。一个简单的测试表明，它将适用于内联样式属性，但是您需要将!important添加到您想要覆盖的属性内联样式属性(<tag style=".." />)在文档样式(<head><style>...</style></head>)中优先于。

在当前结构中，'*'-通用选择器甚至是[OPTIONAL]，因为[attribute]选择器规则是足够常见的。

请注意，CSS属性规则[style*="..."]必须与标签style="..."的分配完全匹配。当不完全匹配时，它将失败。

/* Testing any CSS property will NOT work */ * { color: orange } [style*="color: orange"] { color: black } /* Testing the inline 'style' attribute will work */ [style*="color: red"] { color: black !important } [style*="color: green"] { font-weight: bold; color: black } [style*="color: blue"] { color: black } h3 { color: black }
<h3>for this to work, '*'-universal selector in the CSS is not required:</h3> <p>This is the first test line. It is 'orange' and will not become 'black' as the CSS required by OP does not work.</p><p style="color: red">This is a test line. It is 'red', but will become 'black' when CSS rule is successful.</p> <p style="color: green">This is also a test line. It is 'green' and will become 'bold' as there is no inline `font-weight` setting, but not 'black' by lack of '!important'.</p> <p style="color: blue">This is also a test line. It is 'blue' and will not become 'black' by lack of '!important'.</p>

相关内容

最新更新

热门标签：