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

176

我目前正在从事一个项目，该项目无法控制我要应用CSS样式的HTML。而且在没有足够的id和class声明来区分元素的意义上，HTML的标签不是很好。

因此，我正在寻找将样式应用于没有id或class属性的对象的方法。

有时，表单项具有“名称”或“值”属性：

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

有没有一种方法可以应用基于name =“ goButton”的样式？那“价值”呢？

这种事情很难被发现，因为Google搜索会找到各种实例，在这些实例中，诸如“名称”和“值”之类的广泛术语会出现在网页中。

我有点怀疑答案是否定的……但是也许有人巧妙地破解了？

任何建议将不胜感激。

html css css-selectors

— 发问者
source

280

您可以使用属性选择器，

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

<input name="goButton">

展开摘要

请注意，IE6不支持它。

更新：由于IE6已死，在2016年您几乎可以随意使用它们。http://quirksmode.org/css/selectors/

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

— 默德·奥拉里耶夫
source

51

文字输入范例

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

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

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

展开摘要

— 马拉贾
source

21

您可以使用属性选择器，但它们不能像merder所说的那样在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 }

— 克里斯
source

13

对于未来的Google，仅供参考，由@meder答案的方法，可以用具有名称属性的元素使用，因此，可以说那里有一个<iframe>名为xyz那么你可以使用规则为初级讲座。

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

该name属性可用于以下元素：

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

— 穆罕默德·阿卜杜勒·穆吉布
source

1

这实际上并没有增加任何问题。name如果您确实愿意，可以将该属性放在任何地方

— Isaac

4

如果我能正确理解您的问题，

是的，如果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');

— 吉特什
source

4

也可以使用[name=elementName]{}之前没有标签的方法。它将影响具有该名称的所有元素。

例如：

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

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

展开摘要

— 理查德·索克
source

0

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

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

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

— 用户名
source

0

如果您在输入中未使用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">

展开摘要

希望它的帮助。谢谢

— 阿里·拉扎（Ali Raza）
source

-2

您是否探索过使用jQuery的可能性？它具有非常广泛的选择器模型（语法类似于CSS），即使您的元素没有ID，您也应该可以使用父级->子级->孙子关系来选择它们。选择它们之后，将有一个非常简单的方法调用（我忘记了确切的名称），该方法调用使您可以将CSS样式应用于元素。

它应该易于使用，而且，很可能您将跨平台兼容。

— DXM
source