могу ли я применить стиль css к имени элемента?

<p>в настоящее время я работаю над проектом, в котором у меня нет контроля над html, к которому я применяю стили css. и html-код не очень хорошо помечен, в том смысле, что не хватает объявлений id и class, чтобы различать элементы.</p><p>итак, я ищу способы применения стилей к объектам, которые не имеют атрибута id или class.</p><p>иногда элементы формы имеют атрибут «name» или «value»:</p><pre><code><input type="submit" value="go" name="gobutton"> </code></pre><p>есть ли способ, которым я могу применить стиль, основанный на name = "gobutton"? как насчет "стоимости"?</p><p>это та вещь, которую трудно выяснить, потому что поиск google найдет все виды случаев, в которых такие широкие термины, как «имя» и «значение» будут появляться на веб-страницах.</p><p>я отчасти подозреваю, что ответ - нет ... но, возможно, у кого-то есть умный взлом?</p><p>любой совет будет принята с благодарностью.</p>

<p>вы можете использовать селектор атрибута, <code>input[name="gobutton"] { }</code>. имейте в виду, что это не поддерживается в ie6.</p><p>обновление: в 2016 году вы можете в значительной степени использовать их по своему усмотрению, поскольку ie6 мертв. <a href="http://quirksmode.org/css/selectors/">http://quirksmode.org/css/selectors/</a> </p><p> <a href="http://reference.sitepoint.com/css/attributeselector">http://reference.sitepoint.com/css/attributeselector</a> </p>

<p>пример ввода текста</p><pre><code>input[type=text] { width: 150px; } input[name=myname] { width: 100px; } </code></pre>

<p>для будущих google, fyi, метод в ответе @meder, может использоваться с любым элементом, который имеет атрибут name, поэтому, скажем, есть <code><iframe></code> с именем <code>xyz</code>, тогда вы можете использовать правило, как показано ниже.</p><pre><code>iframe[name=xyz] { display: none; } </code></pre><p>атрибут <code>name</code> может использоваться для следующих элементов:</p><ul> <li><code><button></code></li> <li><code><fieldset></code> </li> <li><code><form></code> </li> <li><code><iframe></code> </li> <li><code><input></code> </li> <li><code><keygen></code> </li> <li><code><map></code> </li> <li><code><meta></code></li> <li><code><object></code></li> <li><code><output></code></li> <li><code><param></code></li> <li><code><select></code></li> <li><code><textarea></code></li> </ul>

<p>если я правильно понимаю ваш вопрос,</p><p>да, вы можете установить стиль отдельного элемента, если его идентификатор или имя доступно,</p><p>например </p><p><strong> если идентификатор доступен, то вы можете получить контроль над элементом, как, </strong></p><pre><code><input type="submit" value="go" name="gobutton"> var v\_obj = document.getelementsbyid('gobutton'); v\_obj.setattribute('style','color:red;background:none'); </code></pre><p><strong> иначе, если имя доступно, тогда вы можете получить контроль над элементом, как, </strong></p><pre><code><input type="submit" value="go" name="gobutton"> var v\_obj = document.getelementsbyname('gobutton'); v\_obj.setattribute('style','color:red;background:none'); </code></pre>

<p>использование <code>[name=elementname]{}</code> без тега before тоже будет работать . это повлияет на все элементы с этим именем.</p><p>например:</p><pre><code><input type=text name=test> <div name=test></div> [name=test]{ width: 100px; } </code></pre>

<p>это идеальная работа для селектора запросов ...</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>затем вы можете просмотреть эти коллекции, чтобы обработать найденные элементы.</p>