2016-12-31 2 views
2

У меня есть html-документы, где я хочу настроить теги h2, которые имеют любое значение id, а не target h2, у которых нет идентификатора. Я знаю, что переписывание html с классами является возможным вариантом, но мы пытаемся изменить CSS только сейчас.Есть ли стиль CSS для выбора элемента с любым идентификатором?

Я хочу предназначаться следующее с помощью правила CSS:

<h2 id="one"> 
<h2 id="two"> 

, но не направлены на следующие одновременно

<h2> 

Есть ли что-то вроде

h2#[*] { font-size: 12pt} 

что выполнит это? Я искал на этом сайте и других и не нашел ответа. Я уверен, что это базовый CSS для многих здесь, но я в тупике. Спасибо, MB

ответ

6

Используйте CSS атрибут-селектор, выбирая только те элементы, которые имеют определенный атрибут присутствует, такие как – как в вашем вопросе – id:

h1[id], h2[id] { 
    /* CSS rules */ 
} 

h1[id], 
 
h2[id] { 
 
    color: limegreen; 
 
    font-size: 2em; 
 
}
<h1>Heading level 1, with no id</h1> 
 
<h1 id="h1">Heading level 1, with an id</h1> 
 

 
<h2>Heading level 2, with no id</h1> 
 
<h2 id="h2">Heading level 2, with an id</h1>

Литература:

+1

Это не гарантирует, что атрибут 'id' имеет значение, только то, что оно присутствует. В вопросе говорится, что «имеет любое значение id» ... рекомендуется использовать псевдо-класс отрицания: 'h1 [id]: not ([id =" "]) {}'. – Ricky

1

да, вы можете использовать селектор атрибутов в CSS

[id]{ /* css here */ }

это будет выбрать любой элемент с идентификатором атрибута

для вашего случая вы должны h2[id]

работает пример здесь http://jsbin.com/fabayaqusa/edit?html,css,output

Смежные вопросы