CSS 선택기가 작동하지 않습니다

Question

그래서 내 디자인과 관련하여 CSS 선택기에 대한 질문이 있습니다.

"+", "~"등과 같이 여러 선택기를 사용하여 CSS를 통해 체크 상자를 조작하는 방법에 대해 살펴 보려고합니다. 확인란을 선택하거나 선택 취소 할 때 이벤트를 수행합니다.

왜이 기능이 작동하지 않는지, 아니면 "~"을 사용하는 것이 혼란 스럽습니다. "+"는 첫 번째 요소 다음에 오는 요소와 직접적으로 일치하는 요소를 선택하지만 "~"뒤에 오는 모든 요소를 ​​선택합니다 이전 요소. 이것은 내가 처음이 아니므로 최선을 다하지는 못하지만 ... 나는 내 머리를 감싸려고 노력하고 있습니다. "요소": 여러 셀렉터를 문자열로 표시 할 때 참조 점으로 계산하지 않습니까? 나는 두 명을 jsfiddle에 남겨 뒀다.

나중에 탐색 메뉴로 사용할 예정이지만, 당분간은 우선 선택기가 멈추도록 남겨 두었습니다.

HTML

<div id="container"> 
    <header> 
      <input type="checkbox" id="navigation_drawer"> 
       <label for="navigation_drawer" id="drawer_open"></label> 
       <label for="navigation_drawer" id="drawer_close"></label> 
      <nav id="navigation"> 
       <ul> 
        <li id="home_page"><a href="#">Home</a></li> 
        <li id="about_page"><a href="#">About</a></li>       
       </ul> 
      </nav> 
    </header> 
</div> 

CSS

label#drawer_open{ 
    position: absolute; 
    top: 2; 
    right: 0; 
    margin-right: 1rem; 
    background-image: url('http://i.imgur.com/Nxafddw.png'); 
    background-image: no-repeat; 
    width: 35px; 
    height: 23px; 
} 

#navigation{ 
    background-color:blue; 
} 

#navigation_drawer:checked + #container #navigation{ 
    background-color:red; 
} 

#navigation_drawer:checked + container #navigation{ 
    background-color:red; 
} 

감사합니다!

편집 : 남자들은 가혹한 사람입니다. xD 예. 코드를 복사 할 때 코드를 복사하고 붙여 넣을 때 실수를 저질렀습니다. 내 잘못. 여기에 원래 문제가 업데이트되었습니다. 여기에도 HTML/CSS가 업데이트되었습니다. 피트에게 업데이트 된 바이올린을 주셔서 감사합니다. 나는 당신에게 그것을 줄 것이지만 그것은 회신 대신에 코멘트이기 때문에 나는 다른 사람의 것을 받아 들일 것입니다. 그것은 다른 방법이기도합니다. 감사합니다 : D

https://jsfiddle.net/y9x8accc/6/

Answer 1

+ (Adjacent Sibling Selector)이 즉시 그것을 다음 그 요소를 선택하기 때문에 귀하의 코드가 작동하지 않습니다. 이 경우 확인란의 바로 뒤에있는 요소는 nav이 아닌 #drawer_openlabel입니다.

인접 형제 선택기 이것은 인접 선택기 또는 차세대 형제 선택기로 지칭된다. 이전에 지정된 요소 바로 다음에 지정된 요소 만 선택합니다.

라벨에 들여 쓰기가 잘못되어있는 것 같습니다. 아마도 nav이 직접 형제라고 생각하게했을 것입니다. 어떤 경우에도 General Sibling Selector (~)을 사용해야합니다.

올바른 코드

는 것 원하는 것을 달성하기 위해 :

#navigation_drawer:checked ~ #navigation{ 
    background-color: red; 
} 

Fixed fiddle