此CSS语句是什么意思？

Question

我刚刚看到了这段代码。

.link--icon [class*='text'] {
    padding-left: 8px;
}

这行.link--icon [class*='text']到底是什么意思？

Answer 1

这是一个属性通配符选择器。它在.link--icon其类名称包含“文本” 的子元素中查找。

例：

div[class*="test"] {
    background: #ffff00;
}

<div class="first_test">The first div element.</div>
<div class="second">The second div element.</div>
<div class="test">The third div element.</div>
<p class="test">This is some text in a paragraph.</p>

这里我们有三个div，两个div的类包含“ test”关键字，因此这些div的背景设置为“＃FFFF00”。中间的div不匹配，并且p元素与div规则不匹配，因此它们不受影响。

请参阅此w3schools代码段和此问题。