CSS ID и селекторы классов

Question

Что означают эти два селектора CSS?

h1#myItemOne h2
{
    background:#0099FF;
    color: #A3F4A3;
}

h1.myItemTwo  h2
{ 
    background:#0099FF;
    color: #A3F4A3;
}

Эти два селектора действительны для использования?

Answer 1

Первый соответствует элементу h2, который является дочерним потомком элемента h1 с идентификатором myItemOne

Пример:

<h1 id="myItemOne">
    <h2>Me!</h2>
</h2>

Второй соответствует элементу h2, который является дочерним потомком элемента h1 с class myItemTwo

Пример:

<h1 class="myItemTwo">
    <h2>Me!</h2>
</h2>

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

Ссылка: http://www.w3.org/TR/CSS2/selector.html

Answer 2

h1#myItemOne h2 { background:#0099FF; color: #A3F4A3; }

Означает любой h2, являющийся потомком элемента h1 с идентификатором, равным «myItemOne»

h1.myItemTwo h2 { background:#0099FF; color: #A3F4A3; }

Означает любой h2, являющийся потомком элемента h1 с классом, равным «myItemOne»

Answer 3

"#" определяет уникальный идентификатор на странице, точка определяет класс, который вы можете использовать в нескольких местах.

Использование:

<h1 id="...."></h1>
<h1 class="...."></h1>