css3 специфичность nth-child

Question

css3 специфичность nth-child

Почему эти два не выходят эквивалентными? Первый показывает зеленый ряд, а второй нет. Разница лишь в html c. Кроме того, какова специфика селектора nth-child?

<!DOCTYPE html>
<html>
    <head>
        <title>Stripe Test</title>
        <style type='text/css'>
            tr:nth-child(2n+1)
            {
                background-color: red;
            }
            tr.c
            {
                background-color: green;
            }
        </style>
    </head>
    <body>
        <table class='stripe'>
            <tr class='c'>
                <td>one</td>
            </tr>
            <tr>
                <td>two</td>
            </tr>
            <tr>
                <td>three</td>
            </tr>
        </table>
    </body>
</html>

vs-

<!DOCTYPE html>
<html>
    <head>
        <title>Stripe Test</title>
        <style type='text/css'>
            tr:nth-child(2n+1)
            {
                background-color: red;
            }
            tr .c
            {
                background-color: green;
            }
        </style>
    </head>
    <body>
        <table class='stripe'>
            <tr class='c'>
                <td>one</td>
            </tr>
            <tr>
                <td>two</td>
            </tr>
            <tr>
                <td>three</td>
            </tr>
        </table>
    </body>
</html>

1

css css-selectors css-specificity

Источник

user969423 01 май '12 в 04:55

3 ответа

Решение

Второй - это совершенно другой селектор. tr .c с пробелом между ними ищет элемент с именем класса "c", у которого есть предок <tr> элемент. Первый tr.c ищет <tr> элемент с именем класса "c".

Это не имеет ничего общего со спецификой, но вместо этого ваше понимание CSS.

2

Источник

user246246 01 май '12 в 04:58

Попробуйте вместо этого использовать:nth-child(odd), а также заметьте, что IE не нравится вообще.

-1

Источник

user898905 01 май '12 в 05:02

Другие вопросы по тегам css css-selectors css-specificity

user118068 01 май '12 в 04:59 2012-05-01 04:59 · Accepted Answer · 2012-05-01 04:59

tr.c (без пробела)`- строка таблицы класса c.

tr .c (с пробелом) - это строка таблицы, за которой следует какой-то ДРУГОЙ неуказанный тег с классом c.

Пространство подразумевает отношения родитель / ребенок. Так как у вас есть c класс ON самого тега tr, ниже дочернего элемента нет tr это имеет c учебный класс.