我可以将CSS样式应用于元素名称吗?

我目前在一个项目上工作,我无法控制我应用CSS样式的HTML。HTML没有很好地标记,因为没有足够的id和class声明来区分元素。

所以,我正在寻找方法,我可以应用样式的对象,没有id或类属性。

有时,表单项具有“name”或“value”属性:

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

是否有一种方法,我可以应用基于名称="goButton"的风格?那“价值”呢?

这是一种很难找到的东西,因为谷歌搜索会找到各种各样的例子,在这些例子中,“名字”和“价值”等宽泛的术语会出现在网页上。

我有点怀疑答案是否定的…但也许有人有聪明的破解方法?

任何建议都将不胜感激。

446648 次浏览

你可以使用属性选择器,

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

Be aware that it isn't supported in IE6.

Update: In 2016 you can pretty much use them as you want, since IE6 is dead. http://quirksmode.org/css/selectors/

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

你可以使用属性选择器,但它们不会像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 }

如果我明白你的问题,

是的,你可以设置单个元素的样式,如果它的id或名称可用,

如。

如果id可用,你就可以控制这个元素,

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


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


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

否则,如果name可用,则你可以对元素进行控制,

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


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


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

你探索过使用jQuery的可能性吗?它有一个非常广泛的选择器模型(在语法上类似于CSS),即使你的元素没有id,你也应该能够使用父->子->孙子关系来选择它们。一旦你选择了它们,有一个非常简单的方法调用(我忘记了确切的名字),它允许你对元素应用CSS样式。

它应该很容易使用,而且作为奖励,您很可能非常跨平台兼容。

文本输入示例

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


input[name=myname] {
width: 100px;
}
<input type="text">
<br>
<input type="text" name="myname">

对于未来的google用户,仅供参考,@meder回答中的方法可以与任何具有name属性的元素一起使用,因此假设有一个<iframe>,其名称为xyz,然后您可以使用如下规则。

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

name属性可用于以下元素:

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

这是查询选择器的完美工作…

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

然后可以循环遍历这些集合,对找到的元素进行操作。

使用之前没有标记的[name=elementName]{}也可以工作。 它将影响所有具有此名称的元素

例如:

[name=test] {
width: 100px;
}
<input type=text name=test>
<div name=test></div>

如果你在输入中使用的不是name而是其他元素,那么你可以用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">

希望能有所帮助。谢谢你!

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


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