CSS 내가 다른 클래스 앞에 클래스에 대한 선택기를 만들려고 해요 다른 클래스

Question

읽기 CSS documentation 앞에 클래스를 선택 내 코드 :

는

.CCCC { 
    width: 100px; 
    height: 20px; 
    border: 1px solid #000; 
} 

.CCCC~.BBBB { 
    width: 10px; 
    border: 1px solid #000; 
} 

그래서 내 예제에서 CCCC 클래스 최초의 div이 100px의 폭이 whould,,885와 두 번째 divBBBB의 div 앞에 오는 ID의 너비는 10px이어야합니다.

이것이 작동하지 않는 이유는 무엇입니까?

Answer 1

주문을 취소해야합니다. 여기서는 .BBBB 다음에 형제 인 모든 .CCCC을 선택합니다. 당신은 즉시 따라야합니다 다음 하나를 원하는 경우

.BBBB ~ .CCCC { 
    width: 10px; 
    border: 1px solid #000; 
} 

는,이 :

.BBBB + .CCCC { 
    width: 10px; 
    border: 1px solid #000; 
} 

CSS의 현재 기능을 기억하는 것이 도움이된다,에서 맨 마지막 항목 당신의 선택기 문자열은 항상 실제로 선택하고 속성을 적용하는 항목이 될 것입니다 (부모 선택기가 나타나면 그럴 수 없습니다). 따라서 .BBBB이 마지막 항목이기 때문에 잘못된 .CCCC ~ .BBBB에 잘못된 플래그가 표시되어야하지만 .CCCC을 변경하려고합니다.