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

Posted 2023-03-06

【中文标题】我可以将 CSS 样式应用于元素名称吗？

【英文标题】：Can I apply a CSS style to an element name?

【发布时间】：2011-07-25 00:51:54

【问题描述】：

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

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

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

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

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

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

我有点怀疑答案是否定的……但也许有人有聪明的技巧？

任何建议将不胜感激。

【参考方案1】：

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


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

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

【讨论】：

尝试为这段代码的作用添加一些描述。它可以显着提高您的回答质量。

【参考方案2】：

如果您在输入中使用的不是名称而是其他元素，那么您可以使用 there 属性定位其他元素。

    [title~=flower] 
      border: 5px solid yellow;
    

    <img src="klematis.jpg" title="klematis flower"  >
    <img src="img_flwr.gif" title="flower"  >
    <img src="img_flwr.gif" title="flowers"  >

希望它的帮助。谢谢

【参考方案3】：

文本输入示例

input[type=text] 
  width: 150px;


input[name=myname] 
  width: 100px;

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

【参考方案4】：

你可以使用属性选择器，

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

<input name="goButton">

请注意，IE6 不支持它。

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

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

【讨论】：

你应该获得金牌

【参考方案5】：

之前使用不带标签的[name=elementName] 也可以。 它将影响具有此名称的所有元素。

例如：

[name=test] 
  width: 100px;

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

【参考方案6】：

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

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

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

【参考方案7】：

对于未来的 googlers，仅供参考，@meder 的答案中的方法可以与任何具有 name 属性的元素一起使用，所以假设有一个名为 <iframe> 的 xyz 然后你可以使用该规则如下。

iframe[name=xyz]     
    display: none;
   

name 属性可用于以下元素：

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

【讨论】：

这并没有真正增加任何问题。如果你真的想的话，name 属性可以放在任何东西上

【参考方案8】：

如果我理解你的问题，那么，

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

【参考方案9】：

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

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

【参考方案10】：

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