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

В настоящее время я работаю над проектом, в котором у меня нет контроля над HTML, к которому я применяю стили CSS. И HTML-код не очень хорошо помечен, в том смысле, что недостаточно идентификаторов и объявлений классов для различения элементов.

Итак, я ищу способы применения стилей к объектам, которые не имеют атрибута id или class.

Иногда элементы формы имеют атрибут «name» или «value»:

<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, как сказал Медер, для этого есть обходные пути javascript. Проверьте Селективизр

Более подробно об атрибутах селекторов: 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 }

Для будущих Google, FYI, метод в ответе @meder, может использоваться с любым элементом, который имеет атрибут name, поэтому, скажем, theres a <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 к элементу (ам).

Он должен быть простым в использовании и в качестве бонуса вы, скорее всего, будете очень кроссплатформенным.