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>

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

请参阅this w3schools snippet和this question。

Answer 2

.link--icon [class*='text']->选择具有类link--icon的元素的每个子元素，它们的class属性值包含子字符串text。

Answer 3

[class*='text']选择器结合了后代选择器和属性选择器，并匹配设置了类"text"的任何元素（例如：<p class="text">），而*是通配符，匹配任何元素。

Answer 4

这意味着指定的样式将应用于具有任何包含“文本”的任何类的元素，并且该元素是在class属性中定义了“ link--icon”的元素的子元素。

.class ：按类选择元素的

[class * ='text'] 通配符类选择器，用于其定义的类包含子字符串'text'

的元素

示例：

我具有以下要素

<input name="man-news">
<input name="milkman">
<input name="letterman2">
<input name="newmilk">

如果我在CSS规则中使用以下选择器：input[name*='man']

我将规则应用于以下元素：

<input name="man-news">
<input name="milkman">
<input name="letterman2">

CSS3 attribute selectors

W3 CSS Selectors

此CSS语句是什么意思？

4 个答案:

示例：