CSS-ный тип отказывается подчиняться

Question

CSS-ный тип отказывается подчиняться

0

К сожалению, для меня селектор nth-of-type отказывается подчиняться заказам в простом сценарии, показанном здесь

Это HTML, который используется для тестирования:

<div class="help-title">
    TITLE
</div>
<div class="help-warn-left">
    ERROR
</div>
<div class="help-warn-right">
    ERROR MESS
</div>

<div class="help-section">
    <div class="help-header">
        TEXT1
    </div>
    <div class="help-body">
        TEXT2
    </div>
</div>


<div class="help-section">
    <div class="help-header">
        TEXT3
    </div>
    <div class="help-body">
        TEXT4
    </div>
</div>


<div class="help-section">
    <div class="help-header">
        TEXT5
    </div>
    <div class="help-body">
        TEXT6
    </div>
</div>


<div class="help-section">
    <div class="help-header">
        TEXT7
    </div>
    <div class="help-body">
        TEXT8
    </div>
</div>

Это CSS:

div.help-section{
    color:blue;
    /*background:yellow;*/
}

div.help-section:nth-of-type(2)
{
background:#ff0000;
}

Когда я удаляю комментарий вокруг желтого фона, раздел справки будет иметь желтый фон, поэтому он явно согласен с набором фона. Однако приведенный ниже порядок требует, чтобы второй справочный раздел имел красный фон, но он просто отказывается повиноваться мне! Это мой браузер? Firefox v24.0? Или это я не знаю, что делает nth-of-type?

Я ожидаю, что это нужно сделать, чтобы выбрать второй div с помощью раздела справки класса, найденного в теле. Очевидно, что я здесь что-то не хватает.

Jack M. 04 март 2014, в 00:42

Источник

0

Это не ваш браузер.
sheriffderek 03 март 2014, в 23:30
0

Пожалуйста, определите, что вы хотите, чтобы произошло.
sheriffderek 03 март 2014, в 23:30
0

@sheriffderek Хорошо, спасибо, что проверили это.
Jack M. 03 март 2014, в 23:34
0

@sheriffderek Обновленный вопрос с этой информацией.
Jack M. 03 март 2014, в 23:36

Показать ещё 2 комментария

Теги:

html

css

css-selectors

2 ответа

3

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

div.container div.help-section:nth-of-type(3)
{
    color:red;
}

и добавить

<div class="container"></div>

вокруг вашего вспомогательного раздела. Я пробовал это с помощью селектора, но не повезло.

Подробнее здесь: http://reference.sitepoint.com/css/pseudoclass-nthoftype

JSFIDDLE

http://jsfiddle.net/HJm49/1/

Shalom Aptekar 03 март 2014, в 21:36

0

извините, я изменил его с 2-го типа на 3-й.
3066d0 03 март 2014, в 23:38
0

Да ... это то, что я также нашел ... Кажется, что ему нужна более конкретная область видимости jsfiddle.net/sheriffderek/JXN92 Это работает, если вы удалите предыдущие div-ы из разделов OP.
sheriffderek 03 март 2014, в 23:40
0

ты избил меня до этого .. +1
Eliran Malka 03 март 2014, в 23:43
0

Проблема с этим по-прежнему заключается в том, что класс справочного раздела не имеет смысла, поскольку его игнорируют.
Jack M. 03 март 2014, в 23:46
0

Кстати, @ShalomAptekar, я знаю, что здесь, наверное, слишком болтливо, но ... хороший сайт, чувак!
Eliran Malka 03 март 2014, в 23:48
0

хехех спасибо :) Я работаю над тем, чтобы было легче читать! Посмотрите, как делается эффект, он не использует CSS;)
3066d0 03 март 2014, в 23:53

Показать ещё 4 комментария

Ещё вопросы

Пожалуйста, определите, что вы хотите, чтобы произошло.
@sheriffderek Хорошо, спасибо, что проверили это.
@sheriffderek Обновленный вопрос с этой информацией.
извините, я изменил его с 2-го типа на 3-й.
Да ... это то, что я также нашел ... Кажется, что ему нужна более конкретная область видимости jsfiddle.net/sheriffderek/JXN92 Это работает, если вы удалите предыдущие div-ы из разделов OP.
Проблема с этим по-прежнему заключается в том, что класс справочного раздела не имеет смысла, поскольку его игнорируют.
Кстати, @ShalomAptekar, я знаю, что здесь, наверное, слишком болтливо, но ... хороший сайт, чувак!
хехех спасибо :) Я работаю над тем, чтобы было легче читать! Посмотрите, как делается эффект, он не использует CSS;)

sheriffderek · Accepted Answer · 2014-03-03T22-30-00.000Z

Другой вариант - использовать другой элемент только для этих разделов

играть на скрипке

HTML

<section class="help-section">
    <div class="help-header">
        TEXT1
    </div>
    <div class="help-body">
        TEXT2
    </div>
</section>

CSS

section:nth-of-type(2) {
    background-color: red;
}

Не знаю, почему кто-то опроверг это, это допустимый обходной путь, если на странице нет других разделов. Поэтому я принимаю этот ответ, несмотря на депрессию.
Вещи, которые можно извлечь из обоих. Странно, хотя. Думаю, я не до конца понимаю, почему он не видит их как группу. Я почти всегда помещаю вещи в списки, и меня всегда подбирают.