我能否将CSS样式应用于元素名称？

Question

我目前正在处理一个项目，其中我对应用CSS样式的HTML没有任何控制权。而且这个HTML标记不是非常好，因为没有足够的ID和类声明来区分元素。

因此，我正在寻找一些可以应用于没有id或class属性的对象的方法。

有时，表单项具有“name”或“value”属性：

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

我是否可以根据name="goButton"或"value"来应用样式？

这是一种很难找到答案的事情，因为Google搜索会找到许多包含像"name"和"value"这样的普通术语的网页实例。

我有点怀疑答案是否定的...但也许有人有一个巧妙的方法？

非常感谢您提供任何建议。

- Questioner

Answer 1

您可以使用属性选择器，

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

<input name="goButton">

请注意，它不受IE6支持。

更新：自2016年起，由于IE6已死，您可以根据需要使用它们。 http://quirksmode.org/css/selectors/

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

- meder omuraliev

Answer 2

文本输入示例

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

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

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

- MRRaja

Answer 3

你可以使用属性选择器，但像meder所说的那样，在IE6中它们将不起作用。不过，有javascript解决方法。请检查Selectivizr

更详细的属性选择器信息：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 }

- ChrisR

Answer 4

对于未来的Google搜索用户，FYI，@meder答案中的方法可以用于任何具有名称属性的元素，因此假设有一个名为xyz的<iframe>，则可以使用以下规则。

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

name 属性可用于以下元素：

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

- Mohd Abdul Mujib

---

如果你真的想要，name属性可以放在任何东西上，但这并没有为问题增加任何内容。 - Isaac

此外，有些人不使用谷歌搜索引擎。因此，“googlers”这个词并不是很包容性的。 - gouessej

Answer 5

在没有标签的情况下使用[name=elementName]{}也是有效的。它会影响所有名称为此的元素。

例如：

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

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

- Batsheva Hansav

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');

- Jitesh

Answer 7

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

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

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

- auni athirah

---

尝试为这段代码添加一些描述。这可以显著提高您的答案质量。 - Christopher Moore

Answer 8

如果您在输入中没有使用名称而是其他元素，则可以使用元素的属性来定位其他元素。

    [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">

希望它有所帮助。谢谢。

- Ali Raza

Answer 9

这是使用查询选择器的完美工作...

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

你可以通过循环这些集合来操作找到的元素。

- user4723924

Answer 10

你有没有考虑过使用jQuery？它有一个非常强大的选择器模型（类似于CSS的语法），即使你的元素没有ID，你也应该能够使用父级->子级->孙级关系来选择它们。一旦你选择了它们，就有一个非常简单的方法调用（我忘记确切的名称了），可以将CSS样式应用到元素上。

它应该很容易使用，并且作为奖励，你很可能会非常跨平台兼容。

- DXM