[html] 첫 번째 선택을 제외한 모든 CSS3 선택자 질문

Program / 글쓴이

다음 마크 업을 사용하여 CSS 선택기가 각 옵션 div 내에서 첫 번째 선택 메뉴를 제외하고 모두 선택하기를 원합니다.

<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 선택기를 지원하는 Prototype 내에서 이것을 사용하고 있으므로 브라우저 지원에 관심이 없습니다.

초기 선택자는 다음과 같습니다.

div.options div select

나는에 대한 몇 가지 변화를 시도했다 nth-child및 :not(:first-child)하지만 작업 할 수없는 것.

답변

참조 : http://jsfiddle.net/uDvEt/1/

.options > div:not(:first-child) select { background:yellow;}

답변

every 가 부모의 첫 번째 (유일한) 자식 이기 때문에를 사용할 때 divs 대신 s 옵션을 선택해야합니다 .select:not(:first-child)selectdiv

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

답변

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

답변