我可以將 CSS 樣式應用於元素名稱嗎？

Question

我目前正在開發一個項目，在該項目中我無法控制應用 CSS 樣式的 HTML。 並且 HTML 沒有很好地標記，因為沒有足夠的 id 和 class 聲明來區分元素。

因此，我正在尋找可以將樣式應用於沒有 id 或 class 屬性的對象的方法。

有時，表單項具有“名稱”或“值”屬性：

<input type="submit" value="Go" name="goButton">

有沒有辦法可以應用基於 name="goButton" 的樣式？ “價值”呢？

這是一種很難找到的東西，因為 Google 搜索會找到各種情況，其中“名稱”和“價值”等寬泛的術語會出現在網頁中。

我有點懷疑答案是否定的......但也許有人有一個聰明的黑客？

任何建議將不勝感激。

Answer 1

您可以使用屬性選擇器，

 input[name="goButton"] { background: red; }

 <input name="goButton">

請注意，它在 IE6 中不受支持。

更新：在 2016 年，您幾乎可以隨心所欲地使用它們，因為 IE6 已死。 http://quirksmode.org/css/selectors/

http://reference.sitepoint.com/css/attributeselector

Answer 2

文本輸入示例

 input[type=text] { width: 150px; } input[name=myname] { width: 100px; }

 <input type="text"> <br> <input type="text" name="myname">

Answer 3

您可以使用屬性選擇器，但它們不能像 meder 所說的那樣在 IE6 中工作，有 javascript 解決方法。 檢查選擇性

更詳細地了解屬性選擇器： http : //www.css3.info/preview/attribute-selectors/

/* turns all input fields that have a name that starts with "go" red */
input[name^="go"] { color: red }

Answer 4

對於未來的谷歌人，僅供參考，@meder 的答案中的方法可以與任何具有 name 屬性的元素一起使用，所以假設有一個名為xyz的<iframe>然后你可以使用如下規則。

iframe[name=xyz] {    
    display: none;
}   

name屬性可用於以下元素：

• <button>
• <fieldset>
• <form>
• <iframe>
• <input>
• <keygen>
• <map>
• <meta>
• <object>
• <output>
• <param>
• <select>
• <textarea>

Answer 5

使用之前沒有標簽的[name=elementName]{}也可以。 它將影響具有此名稱的所有元素。

例如：

 [name=test] { width: 100px; }

 <input type=text name=test> <div name=test></div>

Answer 6

如果我當時明白你的問題，

是的，如果其 id 或名稱可用，您可以設置單個元素的樣式，

例如

如果 id 可用，那么你可以控制元素，例如，

<input type="submit" value="Go" name="goButton">

var v_obj = document.getElementsById('goButton');

v_obj.setAttribute('style','color:red;background:none');

否則，如果名稱可用，則您可以控制元素，例如，

<input type="submit" value="Go" name="goButton">

var v_obj = document.getElementsByName('goButton');

v_obj.setAttribute('style','color:red;background:none');

Answer 7

這是查詢選擇器的完美工作......

var Set1=document.querySelectorAll('input[type=button]');  // by type

var Set2=document.querySelectorAll('input[name=goButton]'); // by name

var Set3=document.querySelectorAll('input[value=Go]'); // by value

然后，您可以遍歷這些集合以對找到的元素進行操作。

Answer 8

如果您不在輸入中使用名稱而是在其他元素中使用名稱，那么您可以使用 there 屬性定位其他元素。

 [title~=flower] { border: 5px solid yellow; }

 <img src="klematis.jpg" title="klematis flower" width="150" height="113"> <img src="img_flwr.gif" title="flower" width="224" height="162"> <img src="img_flwr.gif" title="flowers" width="224" height="162">

希望它的幫助。 謝謝

Answer 9

 input[type=text] { width: 150px; length: 150px; } input[name=myname] { width: 100px; length: 150px; }

 <input type="text"> <br> <input type="text" name="myname">

Answer 10

您是否探索過使用 jQuery 的可能性？ 它有一個非常廣泛的選擇器模型（在語法上類似於 CSS），即使您的元素沒有 ID，您也應該能夠使用父 --> 子 --> 孫子關系來選擇它們。 一旦你選擇了它們，就會有一個非常簡單的方法調用（我忘記了確切的名稱），它允許你將 CSS 樣式應用於元素。

它應該易於使用，並且作為獎勵，您很可能非常具有跨平台兼容性。