н-дитя и раньше - PullRequest
Новая
       13

н-дитя и раньше

3 голосов
/ 24 марта 2012

У меня проблема с CSS, мне нужно добиться этого 

article div#comments-wrapper ul.sub-comment:before {
    width:1px;
    height:67px;
    background-color:#e4e4e4;
    position:absolute;
    margin-left:-595px;
    margin-top:-36px;
    content:'';
}
article div#comments-wrapper ul.sub-comment:nth-child(1):before {
    height:37px;
    margin-top:-6px;
}

, но я не могу добавить два таких псевдоэлемента, и я проверил это (не работает),также пробовал другие способы, но не смог понять.

1 Ответ

3 голосов
/ 24 марта 2012

:nth-child() не фильтрует по классам или чему-либо еще.В вашем коде ваш первый ul.sub-comment не самый первый дочерний элемент в #comments-wrapper, поэтому он не работает.

Вместо этого используйте этот метод выбора и инвертируйте *Стили 1008 * и margin-top выглядят следующим образом: 

article div#comments-wrapper ul.sub-comment:before {
    width:1px;
    height:37px; /* was 67px in your code */
    background-color:#e4e4e4;
    position:absolute;
    margin-left:-595px;
    margin-top:-6px; /* was -36px in your code */
    content:'';
}
article div#comments-wrapper ul.sub-comment ~ ul.sub-comment:before {
    height:67px; /* was 37px in your code */
    margin-top:-36px; /* was -6px in your code */
}

По сути, вместо :nth-child(1) (или :first-child в этом отношении) используйте селектор брата с другим ul.sub-comment, чтобы применить исходные стилидля всех последующих ul.sub-comment элементов после первого .

Обновленная скрипка (также инвертированы стили background-color, поэтому первый остается синим)

...