blocks|key|951500|text|您可以使用属性选择器，|type|unstyled|depth|inlineStyleRanges|entityRanges|data|951501|​|951502|input[name="goButton"]+{
++background:+red;
}|code-block|syntax|javascript|951503|<input+name="goButton">|951504|951505|请注意，它在IE6中不受支持。|951506|更新:+2016年你可以随心所欲地使用它们了，因为IE6已经死了。http://quirksmode.org/css/selectors/|offset|length|951507|http://reference.sitepoint.com/css/attributeselector|951508|entityMap|0|LINK|mutability|MUTABLE|url|http://quirksmode.org/css/selectors/|1^0|0|0|0|0|0|0|X|10|0|0|0|1G|1|0^^$0|@$1|2|3|4|5|6|7|12|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|13|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|14|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|F|7|15|8|@]|9|@]|A|$G|H]]|$1|K|3|C|5|6|7|16|8|@]|9|@]|A|$]]|$1|L|3|M|5|6|7|17|8|@]|9|@]|A|$]]|$1|N|3|O|5|6|7|18|8|@]|9|@$P|19|Q|1A|1|1B]]|A|$]]|$1|R|3|S|5|6|7|1C|8|@]|9|@$P|1D|Q|1E|1|1F]]|A|$]]|$1|T|3|-4|5|6|7|1G|8|@]|9|@]|A|$]]]|U|$V|$5|W|X|Y|A|$Z|10]]|11|$5|W|X|Y|A|$Z|S]]]]

<p>You can use the attribute selector, </p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>input[name="goButton"] {
  background: red;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;input name="goButton"&gt;</code></pre>
</div>
</div>
</p>

<p>Be aware that it isn't supported in IE6.</p>

<p>Update: In 2016 you can pretty much use them as you want, since IE6 is dead. <a href="http://quirksmode.org/css/selectors/" rel="noreferrer">http://quirksmode.org/css/selectors/</a></p>

<p><a href="http://reference.sitepoint.com/css/attributeselector" rel="noreferrer">http://reference.sitepoint.com/css/attributeselector</a></p>


blocks|key|951611|text|文本输入示例|type|unstyled|depth|inlineStyleRanges|entityRanges|data|951612|​|951613|input[type=text]+{
++width:+150px;
}

input[name=myname]+{
++width:+100px;
}|code-block|syntax|javascript|951614|<input+type="text">
<br>
<input+type="text"+name="myname">|951615|951616|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|O|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|P|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|K|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|L|3|-4|5|6|7|S|8|@]|9|@]|A|$]]]|M|$]]

<p>Text Input Example</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>input[type=text] {
  width: 150px;
}

input[name=myname] {
  width: 100px;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;input type="text"&gt;
&lt;br&gt;
&lt;input type="text" name="myname"&gt;</code></pre>
</div>
</div>
</p>


blocks|key|951554|text|你可以使用属性选择器，但它们不能像meder所说的那样在IE6中工作，有javascript可以解决这个问题。检查Selectivizr|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|951555|有关属性选择器的更多详细信息：http://www.css3.info/preview/attribute-selectors/|951556|/*+turns+all+input+fields+that+have+a+name+that+starts+with+"go"+red+*/
input[name%5E="go"]+{+color:+red+}|code-block|syntax|javascript|951557|entityMap|0|LINK|mutability|MUTABLE|url|http://selectivizr.com/|1|http://www.css3.info/preview/attribute-selectors/^0|1L|B|0|0|F|1D|1|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@$A|V|B|W|1|X]]|C|$]]|$1|D|3|E|5|6|7|Y|8|@]|9|@$A|Z|B|10|1|11]]|C|$]]|$1|F|3|G|5|H|7|12|8|@]|9|@]|C|$I|J]]|$1|K|3|-4|5|6|7|13|8|@]|9|@]|C|$]]]|L|$M|$5|N|O|P|C|$Q|R]]|S|$5|N|O|P|C|$Q|T]]]]

<p>You can use attribute selectors but they won't work in IE6 like meder said, there are javascript workarounds to that tho. Check <a href="http://selectivizr.com/">Selectivizr</a></p>

<p>More detailed into on attribute selectors: <a href="http://www.css3.info/preview/attribute-selectors/">http://www.css3.info/preview/attribute-selectors/</a></p>

<pre><code>/* turns all input fields that have a name that starts with "go" red */
input[name^="go"] { color: red }
</code></pre>


blocks|key|735621|text|之前使用不带标签的[name=elementName]{}也可以。它将影响所有具有此名称的元素。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|735622|例如：|735623|​|735624|[name=test]+{
++width:+100px;
}|code-block|syntax|javascript|735625|<input+type=text+name=test>
<div+name=test></div>|735626|735627|entityMap^0|9|K|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|T|8|@$9|U|A|V|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|W|8|@]|D|@]|E|$]]|$1|H|3|I|5|6|7|X|8|@]|D|@]|E|$]]|$1|J|3|K|5|L|7|Y|8|@]|D|@]|E|$M|N]]|$1|O|3|P|5|L|7|Z|8|@]|D|@]|E|$M|N]]|$1|Q|3|I|5|6|7|10|8|@]|D|@]|E|$]]|$1|R|3|-4|5|6|7|11|8|@]|D|@]|E|$]]]|S|$]]

<p>Using <code>[name=elementName]{}</code> without tag before will work too.
It will  affect all elements with this name.</p>

<p>For example:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>[name=test] {
  width: 100px;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;input type=text name=test&gt;
&lt;div name=test&gt;&lt;/div&gt;</code></pre>
</div>
</div>
</p>


blocks|key|735585|text|这是查询选择器的完美工作...|type|unstyled|depth|inlineStyleRanges|entityRanges|data|735586|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|code-block|syntax|javascript|735587|然后，您可以遍历这些集合以对找到的元素进行操作。|735588|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>This is the perfect job for the query selector...</p>

<pre><code>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
</code></pre>

<p>You can then loop through these collections to operate on elements found.</p>


blocks|key|951706|text|如果您没有在输入中使用name，而是在其他元素中使用了name，那么您可以使用带有该属性其他元素作为目标。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|951707|​|951708|++++[title~=flower]+{
++++++border:+5px+solid+yellow;
++++}|code-block|syntax|javascript|951709|++++<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">|951710|951711|希望能有所帮助。谢谢|951712|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Q|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|R|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|K|3|C|5|6|7|T|8|@]|9|@]|A|$]]|$1|L|3|M|5|6|7|U|8|@]|9|@]|A|$]]|$1|N|3|-4|5|6|7|V|8|@]|9|@]|A|$]]]|O|$]]

<p>if in case you are not using name in input but other element, then you can target other element with there attribute.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>    [title~=flower] {
      border: 5px solid yellow;
    }</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>    &lt;img src="klematis.jpg" title="klematis flower" width="150" height="113"&gt;
    &lt;img src="img_flwr.gif" title="flower" width="224" height="162"&gt;
    &lt;img src="img_flwr.gif" title="flowers" width="224" height="162"&gt;</code></pre>
</div>
</div>
</p>

<p>hope its help. Thank you</p>


blocks|key|735653|text|​|type|unstyled|depth|inlineStyleRanges|entityRanges|data|735654|input[type=text]+{
++width:+150px;
++length:+150px;
}

input[name=myname]+{
++width:+100px;
length:+150px;
}|code-block|syntax|javascript|735655|<input+type="text">
<br>
<input+type="text"+name="myname">|735656|735657|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|M|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|I|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|P|8|@]|9|@]|A|$]]]|K|$]]

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>input[type=text] {
  width: 150px;
  length: 150px;
}

input[name=myname] {
  width: 100px;
length: 150px;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;input type="text"&gt;
&lt;br&gt;
&lt;input type="text" name="myname"&gt;</code></pre>
</div>
</div>
</p>


blocks|key|735515|text|你探索过使用jQuery的可能性吗？它有一个非常广泛的选择器模型(在语法上类似于CSS)，即使您的元素没有in，您也应该能够使用parent+-->+child+-->+should来选择它们。一旦您选择了它们，有一个非常简单的方法调用(我忘记了确切的名称)，它允许您将CSS样式应用于元素。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|735516|它应该简单易用，而且作为一个额外的好处，你很可能是非常跨平台兼容的。|735517|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|F|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|G|8|@]|9|@]|A|$]]|$1|D|3|-4|5|6|7|H|8|@]|9|@]|A|$]]]|E|$]]

<p>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).</p>

<p>It should be simple to use and as a bonus, you'll most likely be very cross-platform compatible.</p>


<p>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.</p>

<p>So, I'm looking for ways I can apply styles to objects that don't have an id or class attribute.</p>

<p>Sometimes, form items have a "name" or "value" attribute:</p>

<pre><code>&lt;input type="submit" value="Go" name="goButton"&gt;
</code></pre>

<p>Is there a way I can apply a style based on name="goButton"? What about "value"?</p>

<p>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.</p>

<p>I'm kind of suspecting the answer is no... but perhaps someone has a clever hack?</p>

<p>Any advice would be greatly appreciated.</p>


Can I apply a CSS style to an element name?

jQuery

我目前正在处理一个项目，在该项目中，我无法控制要应用CSS样式的HTML。而且HTML的标签也不是很好，因为没有足够的id和类声明来区分元素。因此，我正在寻找将样式应用于没有id或class属性的对象的方法。有时，表单项具有"name“或"value”属性：<input type="submit" value="Go" name="goButton">有没有方法可以应用基于name="goButt

问是否可以将CSS样式应用于元素名称？
EN

回答 8

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问是否可以将CSS样式应用于元素名称？EN

回答 8

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问是否可以将CSS样式应用于元素名称？
EN