Почему не работает этот селектор CSS: first-child?

Я работаю над проектом Asp.Net MVC 3 и столкнулся с кирпичной стеной, почему это не работает, как мне кажется.

Моя разметка:

<fieldset>
    <input type="hidden" value="2">
    <div class="editor-label"> 
        <label for="Name"> Name</label>
    </div>
    ...
</fieldset>

Мой css:

.display-label, .editor-label
{
    margin: 0.8em 0 0 0;
    font-weight: bold;
    display: inline;
}

fieldset > div:first-child
{
    margin: 0;
}

Все, что я хочу сделать, это сделать первый div в наборе полей с пометкой 0. Я думал, что селектор fieldset > div:first-child применит стиль к "первому ребенку набора полей, тип которого является div", но, похоже, что-то ускользает от меня.

Я пробовал это в IE9/FF/Chrome, так что старый селектор не работал с моими селекторами.

Спасибо.

Ответы

Ответ 1

fieldset > div:first-child означает "выберите первый дочерний элемент fieldset, если он div".

Это не означает "выберите первый div в fieldset".

Первый ребенок в этом случае <input type="hidden" value="2">.

Чтобы выбрать этот div без изменения HTML, вам нужно использовать fieldset > div:first-of-type.

К сожалению, в то время как :first-child широко поддерживается, :first-of-type работает только в IE9 + и других современных браузерах.

Итак, в этом случае лучшим решением является продолжить использование fieldset > div:first-child и просто переместить <input type="hidden" value="2">, чтобы он не был первым потомком.