Html 我可以将 CSS 样式应用于元素名称吗？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5468766/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Can I apply a CSS style to an element name?
提问by Questioner
I'm currently working on a project where I have no control over the HTML that I am applying CSS styles to. And the HTML is not very well labelled, in the sense that there are not enough id and class declarations to differentiate between elements.
我目前正在开发一个项目，在该项目中我无法控制应用 CSS 样式的 HTML。并且 HTML 没有很好地标记，因为没有足够的 id 和 class 声明来区分元素。
So, I'm looking for ways I can apply styles to objects that don't have an id or class attribute.
因此，我正在寻找可以将样式应用于没有 id 或 class 属性的对象的方法。
Sometimes, form items have a "name" or "value" attribute:
有时，表单项具有“名称”或“值”属性：
<input type="submit" value="Go" name="goButton">
Is there a way I can apply a style based on name="goButton"? What about "value"?
有没有办法可以应用基于 name="goButton" 的样式？“价值”呢？
It's the kind of thing that's hard to find out because a Google search will find all sorts of instances in which broad terms like "name" and "value" will appear in web pages.
这是一种很难找到的东西，因为 Google 搜索会找到各种情况，其中“名称”和“价值”等宽泛的术语会出现在网页中。
I'm kind of suspecting the answer is no... but perhaps someone has a clever hack?
我有点怀疑答案是否定的......但也许有人有一个聪明的黑客？
Any advice would be greatly appreciated.
任何建议将不胜感激。
回答by meder omuraliev
You can use the attribute selector,
您可以使用属性选择器，
input[name="goButton"] {
background: red;
}<input name="goButton">Be aware that it isn't supported in IE6.
请注意，它在 IE6 中不受支持。
Update: In 2016 you can pretty much use them as you want, since IE6 is dead. http://quirksmode.org/css/selectors/
更新：在 2016 年，您几乎可以随心所欲地使用它们，因为 IE6 已死。http://quirksmode.org/css/selectors/
回答by MRRaja
Text Input Example
文本输入示例
input[type=text] {
width: 150px;
}
input[name=myname] {
width: 100px;
}<input type="text">
<br>
<input type="text" name="myname">回答by ChrisR
You can use attribute selectors but they won't work in IE6 like meder said, there are javascript workarounds to that tho. Check Selectivizr
您可以使用属性选择器，但它们不能像 meder 所说的那样在 IE6 中工作，有 javascript 解决方法。检查选择性
More detailed into on attribute selectors: http://www.css3.info/preview/attribute-selectors/
更详细地了解属性选择器：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 }
回答by Mohd Abdul Mujib
For future googlers, FYI, the method in the answer by @meder , can be used with any element that has a name attribute, so lets say theres an <iframe>with the name xyzthen you can use the rule as belows.
对于未来的Google，仅供参考，由@meder答案的方法，可以用具有名称属性的元素使用，因此，可以说那里有一个<iframe>名为xyz那么你可以使用规则为初级讲座。
iframe[name=xyz] {
display: none;
}
The nameattribute can be used on the following elements:
该name属性可用于以下元素：
<button><fieldset><form><iframe><input><keygen><map><meta><object><output><param><select><textarea>
<button><fieldset><form><iframe><input><keygen><map><meta><object><output><param><select><textarea>
回答by Richard Socker
Using [name=elementName]{}without tag before will work too.
It will affect all elements with this name.
[name=elementName]{}之前不带标签使用也可以。它将影响具有此名称的所有元素。
For example:
例如：
[name=test] {
width: 100px;
}<input type=text name=test>
<div name=test></div>回答by Jitesh
If i understand your question right then,
如果我当时明白你的问题，
Yes you can set style of individual element if its id or name is available,
是的，如果其 id 或名称可用，您可以设置单个元素的样式，
e.g.
例如
if id available then u can get control over the element like,
如果 id 可用，那么你可以控制元素，例如，
<input type="submit" value="Go" name="goButton">
var v_obj = document.getElementsById('goButton');
v_obj.setAttribute('style','color:red;background:none');
else if name is available then u can get control over the element like,
否则，如果名称可用，则您可以控制元素，例如，
<input type="submit" value="Go" name="goButton">
var v_obj = document.getElementsByName('goButton');
v_obj.setAttribute('style','color:red;background:none');
回答by Ali Raza
if in case you are not using name in input but other element, then you can target other element with there attribute.
如果您不在输入中使用名称而是在其他元素中使用名称，那么您可以使用 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">hope its help. Thank you
希望它的帮助。谢谢
回答by user4723924
This is the perfect job for the query selector...
这是查询选择器的完美工作......
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
You can then loop through these collections to operate on elements found.
然后，您可以遍历这些集合以对找到的元素进行操作。
回答by DXM
have you explored the possibility of using jQuery? It has a very reach selector model (similar in syntax to CSS) and even if your elements don't have IDs, you should be able to select them using parent --> child --> grandchild relationship. Once you have them selected, there's a very simple method call (I forget the exact name) that allows you to apply CSS style to the element(s).
您是否探索过使用 jQuery 的可能性？它有一个非常广泛的选择器模型（在语法上类似于 CSS），即使您的元素没有 ID，您也应该能够使用父 --> 子 --> 孙子关系来选择它们。一旦你选择了它们，就会有一个非常简单的方法调用（我忘记了确切的名称），它允许你将 CSS 样式应用于元素。
It should be simple to use and as a bonus, you'll most likely be very cross-platform compatible.
它应该易于使用，并且作为奖励，您很可能非常具有跨平台兼容性。
