Чи можна застосувати стиль CSS до імені елемента?

Зараз я працюю над проектом, в якому я не маю контролю над HTML, до якого я застосовую стилі CSS. І HTML не дуже добре позначений, в тому сенсі, що недостатньо оголошень id та класу для розмежування елементів.

Отже, я шукаю способи застосувати стилі до об'єктів, які не мають атрибута id або class.

Іноді елементи форми мають атрибут "ім'я" або "значення":

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

Чи є спосіб я застосувати стиль, заснований на name = "goButton"? А як щодо "вартості"?

Це важко знайти, оскільки пошук Google знайде всілякі випадки, в яких на веб-сторінках з'являться широкі терміни, такі як "ім'я" та "значення".

Я начебто підозрюю, що відповідь - ні ... але, можливо, хтось спритно зламав?

Будь-яка порада буде дуже вдячна.

Ви можете використовувати селектор атрибутів,

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

<input name="goButton">

Майте на увазі, що він не підтримується в IE6.

Оновлення: У 2016 році ви можете в значній мірі використовувати їх як хочете, оскільки IE6 мертвий. http://quirksmode.org/css/selectors/

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

Приклад введення тексту

input[type=text] {
  width: 150px;
}

input[name=myname] {
  width: 100px;
}

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

Ви можете використовувати селектори атрибутів, але вони не працюватимуть в 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 }

Для майбутніх googlers, FYI, метод у відповіді @meder, може бути використаний з будь-яким елементом, який має атрибут імені, тому давайте скажемо theres an <iframe>з іменем, xyzтоді ви можете використовувати правило як нижче.

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

nameАтрибут може використовуватися на наступних елементах:

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

Якщо я правильно розумію ваше запитання,

Так, ви можете встановити стиль окремого елемента, якщо його ідентифікатор чи ім'я є,

напр

якщо ідентифікатор доступний, то ви можете отримати контроль над таким елементом,

<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');

Використання [name=elementName]{}без тегів раніше також буде працювати. Це вплине на всі елементи з цією назвою.

Наприклад:

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

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

Це ідеальна робота для вибору запиту ...

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

Потім ви можете переглядати ці колекції для роботи над знайденими елементами.

якщо ви не використовуєте ім'я для введення, але інший елемент, ви можете націлити на інший елемент з атрибутом 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">

сподіваємось на його допомогу. Дякую

Ви вивчали можливість використання jQuery? Він має дуже вибіркову модель вибору (схожа за синтаксисом на CSS), і навіть якщо у ваших елементів немає ідентифікаторів, ви повинні мати можливість вибирати їх, використовуючи батьківські -> дитячі -> онукові відносини. Після того, як ви вибрали їх, з'явиться дуже простий виклик методу (я забуваю точне ім'я), що дозволяє застосувати стиль CSS до елементів (ив).

Він повинен бути простим у використанні, і як бонус, ви, швидше за все, будете дуже сумісні між платформами.