我可以将 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 样式应用于元素。

它应该易于使用，并且作为奖励，您很可能非常具有跨平台兼容性。