Как я могу выбрать второй элемент и после этого в CSS?

Question

Как я могу выбрать второй элемент и после этого в CSS?

0

Я хочу выбрать теги элементов в html с помощью CSS. Например, как я могу выбрать второй li a Plus после этого в одном UL. Я хочу установить left-margin для второго li плюс после этого. Сначала <li><a> не перемещаются вправо и не исправляют, а другие перемещаются вправо с левым краем

        <ul style="list-style:none;">
        <li>
            <a href="#">Contact Us</a>
        </li>
        <li>
            <a href="#">Home</a>

        </li>
        <li>
            <a href="#">Project</a>
        </li>
        <li>
            <a href="#">aboutUs</a>
        </li>
    </ul>

ContactUs Home Project aboutUs Я хочу сохранить margin-left от ContactUs и не идти вправо, но установить margin-left после второго li с 50px для home + project + aboutUs;

user3370683 06 май 2014, в 18:27

Источник

2

Поменяйте мышление (выберите первое отдельно от других, в отличие от выбора других отдельно от первого) и используйте :first-child .
ajp15243 06 май 2014, в 16:07
0

Я хочу сохранить первый li и не двигаться вправо, а другой li двигаться вправо с 50 px
user3370683 06 май 2014, в 16:27
0

Пожалуйста, смотрите снова, я обновляю свой вопрос
user3370683 06 май 2014, в 16:39

Показать ещё 1 комментарий

Теги:

html

css

navigation

html-lists

1 ответ

Ещё вопросы

Поменяйте мышление (выберите первое отдельно от других, в отличие от выбора других отдельно от первого) и используйте :first-child .
Я хочу сохранить первый li и не двигаться вправо, а другой li двигаться вправо с 50 px
Пожалуйста, смотрите снова, я обновляю свой вопрос

wvandaal · Accepted Answer · 2014-05-06T14-37-00.000Z

Это должно сделать это для вас: http://jsfiddle.net/MFtU2/1/

ul > li:not(:first-child) {
  margin-left: 50px;
}

Если вы хотите поддерживать устаревшие браузеры, которые не поддерживают селектор CSS3 :not(), лучше всего выбрать первый li и дать ему margin:0; при 50px что все li имеют 50px: http://jsfiddle.net/MFtU2/3/

ul.ie8safe > li:first-child {
  margin-left: 0;
}

ul.ie8safe > li {
  margin-left: 50px;
}

РЕДАКТИРОВАТЬ:

Учитывая, что ОП немного изменил параметры вопроса, я решил, что обновляю свой ответ. В дополнение к желанию настроить таргетинг на все li кроме первого, вы также хотите, чтобы они отображались на одной горизонтальной плоскости. Для этого вам нужно, чтобы каждый li занимал минимальное пространство, поскольку по умолчанию каждый li будет занимать всю ширину содержащего ul. Есть несколько способов сделать это, но я предпочитаю использовать float: left;

ul > li {
  float: left
}

ul > li:not(:first-child) {
  margin-left: 50px;
}

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

Обратите внимание :not() не поддерживается в IE8 или ниже, если проблема совместимости с более старыми браузерами.
@ ajp15243 Отличный момент, который стоит отметить. Альтернативой будет margin-left: 50px; всех тегов li с помощью margin-left: 50px; а затем специально нацелиться на первый li . Я обновил свой ответ, чтобы включить эту информацию.
@ user3370683 Вам нужно будет предоставить более подробную информацию, иначе мы не сможем помочь дальше.
@ user3370683 настроил скрипку, чтобы показать мне, что не работает. Если вы ознакомитесь с документами, которые я опубликовал, вы увидите, что они работают, учитывая предоставленную вами информацию.
Я хочу сохранить первый li и не двигаться вправо, а другой li двигаться вправо с 50 px
эта навигация должна быть в одной строке без стиля
Пожалуйста, смотрите снова, я обновляю свой вопрос
@ user3370683 А, ну, теперь это не было частью твоего вопроса. Вот обновленная скрипка со всеми li на одной строке. Ключ должен использовать float: left; чтобы получить их все в одной горизонтальной плоскости.
Я видел твой код в скрипке, это не моя цель.
ul> li {float: left} ul> li: not (: first-child) {margin-left: 50px; } ul.ie8safe> li: first-child {margin-left: 0; } ul.ie8safe> li {margin-left: 50px; }