Невозможно использовать nth-child для разделения li в тегах

http://codepen.io/leongaban/pen/uJDIw

Здравствуйте, поэтому в codepen выше я пытаюсь расположить кнопки в верхнем ряду так же, как кнопки в нижнем ряду.

Перед добавлением тегов a я смог заставить работать интервал, используя:

.profile-crop-buttons ul li:nth-child(2) {
    margin: 0 20px 0 20px;
}

Однако теперь, когда я добавил тег a, я не нашел правильного синтаксиса для таргетинга на 2-го дочернего элемента и предоставления ему левого и правого полей.

Все советы оценены! Спасибо....


html css css-selectors margin spacing
person Leon Gaban    schedule 03.04.2013    source источник

Ответы (2)


arrow_upward
3
arrow_downward

Ну, вы не можете иметь <a> в качестве прямого потомка <ul> или <ol>, допустим только <li>, поэтому вы хотите поменять порядок окружающих.

.profile-crop-buttons ul li:nth-child(2) не работает, потому что, как упоминалось выше, <li> не является дочерним элементом <ul>, а <a> (псевдокласс nth-child выбирает только дочерний элемент данного элемента, а не более поздних потомков), но как только вы поменяете порядок вокруг селектора будет работать так, как ожидалось.

Пример

person Jason Yaraghi    schedule 03.04.2013
comment
А, спасибо! Это работает, также я только что нашел этот stackoverflow.com/questions/910850/ , что я и пытался сделать, в конце концов, мне не нужен был тег a :) Подождите еще 5, прежде чем я смогу проверить ваш ответ. - person Leon Gaban; 03.04.2013

arrow_upward
1
arrow_downward

Вы все равно должны указать поле для элемента li, а не для тега a.

В вашем CSS измените

.profile-crop-buttons ul li a:nth-child(2) {
    margin: 0 20px 0 20px;
}

to 

.profile-crop-buttons ul li:nth-child(2) {
    margin: 0 20px 0 20px;
}

Это должно сработать. :)

person varun1505    schedule 03.04.2013