Питання селектора 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>

Я використовую це в прототипі, який має майже повну підтримку селектора 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.