是否可以將CSS應用於名稱包含特定字符串的元素？

我知道我可以申請CSS樣式元素基於它的名字：是否可以將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...

所以，我只是想樣式應用到其名稱包含單詞「描述」的輸入。這可以在沒有腳本的情況下完成嗎？

來源

2015-05-14 chiapa

下面你有正確的答案，它被稱爲**屬性選擇器**。 – panther

是的，你可以：

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

來源

2015-05-14 09:21:05 LinkinTED

謝謝，它工作正常。它能不區分大小寫，同時考慮'description'和'Description'？ – chiapa

只是FYI @chiapa *和$之間的差異如下面的答案所示，$是如果該單詞在字符串的末尾，而*是字符串^^中的任何位置。 –

謝謝@Callum。，我通過測試計算出 – chiapa

是的，它是

個

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 =值] - 屬性必須具有指定的確切值。

[ATT〜=值] - 屬性的值需要是一個空格分隔單詞的列表（例如，類=」標題精選家」），以及一個關鍵詞是完全指定的值。

[ATT | =值] - 屬性的值是正是「價值」或啓動字「值」，並緊跟着「 - 」，所以這將是「值 - 」。

[att^= value] - 屬性的值以指定的值開始。

[att $ = value] - 該屬性的值以指定的值結束。

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

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

至於想選擇它不管資本的我beleive你能做到這一點（不使用的不是CSS等代碼）的唯一方法是隻降從查詢資本，所以你必須，而不是input[name*=escription]input[name*=Description]

來源

2015-05-14 09:21:13 DCdaz

謝謝，這並不完全回答我的問題。字符串可以在中間，這些都不會影響他們，然後 – chiapa

嗨Chiapa，'* =意味着任何地方。'會 – DCdaz

謝謝DCdaz，我知道，你在我的評論 – chiapa

-2

demo

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

來源

2015-05-14 09:25:48 Vicky

Vicky中加入它，謝謝你的回答，但是，你看過這個問題嗎？ – chiapa

只能用這個..... input [name * =「Description」] { width：400px; } – Vicky

您甚至可以根據需要廣告數據。
input [data-name =「themeDescription」] {
width：300px;
}

來源

2015-05-14 09:31:16

是否可以將CSS應用於名稱包含特定字符串的元素？

回答

相關問題