Question

我目前正在开发一个项目，我无法控制我应用CSS样式的HTML。并且HTML没有很好地标记，因为没有足够的id和类声明来区分元素。

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

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

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

有没有办法可以应用基于name =“goButton”的样式？ “价值”怎么样？

这种情况很难找到，因为谷歌搜索会发现各种各样的实例，其中“名称”和“价值”等广义术语将出现在网页中。

我有点怀疑答案是否定的......但也许某人有一个聪明的黑客？

非常感谢任何建议。

Answer 1

您可以使用属性选择器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;
}

Answer 3

你可以使用属性选择器，但它们不能在IE6中工作，就像meder说的那样，有一些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 }

Answer 4

对于未来的googlers，由@meder提供的答案中的方法，可以与任何具有name属性的元素一起使用，所以让我们说<iframe>名为xyz然后你可以使用以下规则。

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

name属性可用于以下元素：

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

Answer 5

如果我当时理解你的问题，

是的，您可以设置单个元素的样式，如果其ID或名称可用，

e.g。

如果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 6

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

例如：

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

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

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，你也应该能够使用parent选择它们 - ＆gt;孩子 - ＆gt;孙子关系。选择它们之后，会有一个非常简单的方法调用（我忘记确切的名称），它允许您将CSS样式应用于元素。

它应该简单易用，作为奖励，你很可能是跨平台兼容的。

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

10 个答案: