Question

我在网页上发现了这个 css ，并想知道它是如何运作的！

这是什么意思？ input[class*="span"]

input[class*="span"], select[class*="span"], textarea[class*="span"] {
    float: none;
    margin-left: 0;
}

Answer 1

这意味着它将选择任何具有类的输入，该类在类名中包含字符串“span”ANYWHERE。如：

<input class="span" type="text" value="span" />

<input class="span-3" type="text" value="span-3" />

<input class="span-six" type="text" value="span-six" />

 <input class="myspan" type="text" value="myspan" />

Codepen EXample

Answer 2

'*'是属性通配符选择器。该CSS选择器查找那些类中包含类名为“span”的类的任何元素。

Answer 3

来自w3schools.com：

示例：

a[src*="w3schools"]

选择src属性值包含子字符串“w3schools”

的每个元素

http://www.w3schools.com/cssref/css_selectors.asp

但在你的例子中，它看起来有点无用。由于select可能有一个“span”类，你可以用：

选择它

input.span, select.span, textarea.span {
    float: none;
    margin-left: 0;
}

然后，再次在HTML元素之后调用您的类，并不是很聪明。你可以发贴它所指的HTML吗？

Answer 4

使用这种选择器，您说如果提供的字符串出现在值的任何位置，则将应用CSS规则。

您可以在此处获得更详尽的解释：http://css-tricks.com/multiple-attribute-values/

希望这有帮助。

Answer 5

它基本上意味着“选择包含span类的每个类型元素（如输入字段）。

看看：W3S Schools

Answer 6

input[class*="span"]与input.span没有差异用法。 input[class*="span"]表示input

的class="span"代码

CSS输入[class * =“span”]

6 个答案: