Question

我知道我可以根据名称将CSS样式应用于元素：

input[name=description] {    
    width: 200px;
}

但是可以将CSS样式应用于名称中包含特定字符串的元素吗？

想象一下几个输入：

<input type="text" name="projectDescription"/>
<input type="text" name="themeDescription"/>
<input type="text" name="methodologyDescription"/>
<input type="text" name="somethingElse"/>
etc...

所以，我只想将样式应用于名称中包含单词＆＃34; Description＆＃34;的输入。这可以在没有脚本的情况下完成吗？

Answer 1

是的，你可以：

input[name*="Description"] {
    width: 200px;
}

DEMO

More info

[attr] 
    Represents an element with an attribute name of attr.
[attr=value]
    Represents an element with an attribute name of attr 
    and whose value is exactly "value".
[attr~=value]
    Represents an element with an attribute name of attr 
    whose value is a whitespace-separated list of words, 
    one of which is exactly "value".
[attr|=value]
    Represents an element with an attribute name of attr. 
    Its value can be exactly “value” or can begin with “value”
    immediately followed by “-” (U+002D). It can be used for 
    language subcode matches.
[attr^=value]
    Represents an element with an attribute name of attr 
    and whose value is prefixed by "value".
[attr$=value]
    Represents an element with an attribute name of attr 
    and whose value is suffixed by "value".
[attr*=value]
    Represents an element with an attribute name of attr 
    and whose value contains at least one occurrence of 
    string "value" as substring.

Source

Answer 2

是的

input[name*=Description] {
  width: 200px;
  background: purple;
}

<input type="text" name="projectDescription" />
<input type="text" name="themeDescription" />
<input type="text" name="methodologyDescription" />
<input type="text" name="somethingElse" />

<强> 1。属性选择器

属性选择器允许您根据元素的属性定位元素。

您只能指定元素的属性，因此所有元素都可以   在HTML中具有该属性 - 无论价值如何   有针对性的，或更具体的和具有特定目标的元素   属性值 - 这是属性选择器的位置   显示他们的力量。

有6种不同类型的属性选择器：

[att = value] - 该属性必须具有指定的确切值。

[att~ = value] - 属性的值必须是分隔的空格   单词列表（例如，class =“title featured home”），以及其中之一   这些单词正是指定的值。

[att | = value] - 属性的值正好是“值”或以   单词“value”，紧接着是“ - ”，所以它会是   “值 - ”。

[att ^ = value] - 属性的值以指定值开头。

[att $ = value] - 属性的值以指定值结尾。

[att * = value] - 属性的值包含指定的值。

click here for some more detailed info on atribute selector's

至于想要选择它而不管资本，我认为你可以做到这一点的唯一方法（不使用CSS以外的代码）就是从查询中删除资金，这样你就可以{{1而不是input[name*=escription]

Answer 3

如果需要，您甚至可以投放广告数据。
输入[data-name =“themeDescription”] {
宽度：300px;
}

Answer 4

demo

var arr = [10,20,30,40,50];

是否可以将CSS应用于名称中包含特定字符串的元素？

4 个答案: