Вопрос о селекторе CSS3 для всех, кроме первого выбора


92

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

<div class="options">
    <div class="opt1">
        <select title="Please choose Warranty">
            <option value="">Select Waranty</option>
            <option value="1">1 year guarantee</option>
            <option value="2">3 year guarantee</option>
        </select>
    </div>
    <div class="opt2">
        <select title="Please choose Color">
            <option value="">Select Color</option>
            <option value="1">Red</option>
            <option value="2">Blue</option>
        </select>
    </div>
    <div class="opt3">
        <select title="Please choose Size">
            <option value="">Select Size</option>
            <option value="1">Small</option>
            <option value="2">Big</option>
        </select>
    </div>
</div>

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

Первоначальный селектор будет примерно таким:

div.options div select

Я попробовал несколько вариаций на nth-childи , :not(:first-child)но не могу показаться , чтобы сделать его работу.

Ответы:



49

Вам нужно выбрать параметр divs вместо selects при использовании :not(:first-child), потому что каждый selectявляется первым (и единственным) дочерним элементом своего родителя div:

div.options > div:not(:first-child) > select

Альтернативой :not(:first-child)является использование :nth-child()с начальным смещением 2, например:

div.options > div:nth-child(n + 2) > select

Другая альтернатива - общий комбинатор братьев и сестер ~(который поддерживается IE7 +):

div.options > div ~ div > select

спасибо за дополнительную информацию, принял другой ответ, так как он также был правильным и пришел первым.
robjmills

1
На всякий случай, если вас беспокоят старые IE, я добавил третье решение.
BoltClock

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.