html - 부모 CSS 클래스는 어떻게 인식되지 않습니까?

일반 형제 콤비 네이터 ( ~ ) ) 및 인접 형제 조합기 ( + ) ),직접 형제인 요소에서만 작동합니다.

위에 게시 한 코드에서 a[cat="java"]  그리고 <div cat="java">  서로 다른 상위 div 아래에 있으므로 형제 선택기가 작동하지 않습니다.

이 탭에서 얻을 수있는 가장 좋은 결과는 일반 CSS를 사용한 레이아웃입니다. <label> 를 사용하는 것입니다.  그리고 <input type="radio">  내 생각에 참고, 나는 또한 cat= 를 변경   data-cat= 로  적절한 마크 업을 위해.

jsFiddle

.btns label {
  display: inline-block;
  padding: 5px 10px;
  margin: 0 5px 10px 0;
  background: royalblue;
  color: white;
}
#all:checked ~ .btns label[for="all"],
#java:checked ~ .btns label[for="java"],
#internet-thing:checked ~ .btns label[for="internet-thing"],
#blockchain:checked ~ .btns label[for="blockchain"] {
  background: tomato;
}
#all:checked ~ .post div,
#java:checked ~ .post div[data-cat="java"],
#internet-thing:checked ~ .post div[data-cat="internet-things"],
#blockchain:checked ~ .post div[data-cat="blockchain"] {
  display: block;
}
input[name="cat"][type="radio"],
.post div {
  display: none;
}

<input id="all" name="cat" type="radio" checked>
<input id="java" name="cat" type="radio">
<input id="internet-thing" name="cat" type="radio">
<input id="blockchain" name="cat" type="radio">
<div class="btns">
  <label for="all">All</label>
  <label for="java">Java</label>
  <label for="internet-thing">Internet of Things</label>
  <label for="blockchain">Blockchain</label>
</div>
<div class="post">
  <div data-cat="java">Everything about Java Spring</div>
  <div data-cat="blockchain">A bitcoin project</div>
  <div data-cat="java">Eclipse IDE Java</div>
  <div data-cat="blockchain">Ripple Network</div>
  <div data-cat="internet-things">Smart Thermostate</div>
  <div data-cat="java">IntelliJ IDEA Community Edition</div>
  <div data-cat="java">Java SDK 9.0</div>
  <div data-cat="java">Java SDK 8.0</div>
  <div data-cat="blockchain">Ethereum tokens ICO</div>
  <div data-cat="internet-things">Walking Fridge</div>
  <div data-cat="blockchain">Bitcoin 3.0</div>
  <div data-cat="internet-things">Aibo</div>
</div>

라디오 버튼 솔루션은 아마도 처음에는 함께 할 것이지만 <a> 를 사용해야하기 때문에  태그와 버튼 및 내용에 대한 별도의 래퍼 클래스가있는 경우 일부 도우미 div에서 : target 선택기를 사용하여 형제 역할을하고 : not 선택기와 attr로 옵션을 필터링 할 수 있습니다.

.btns a {
  display: inline-block;
  padding: 5px 10px;
  margin: 0 5px 10px 0;
  background: royalblue;
  color: white;
}
a:active {
  background: tomato;
}
#java:target ~ div:not([data-cat="java"]){display:none;}
#blockchain:target ~ div:not([data-cat="blockchain"]){display:none;}
#internet-things:target ~ div:not([data-cat="internet-things"]){display:none;}

<div class="btns">
  <a href="#"> All </a>
  <a href="#java">Java</a>
  <a href="#internet-things">Internet of Things</a>
  <a href="#blockchain">Blockchain</a>
</div>
<div class="post">
  <div class="helper" id="java"></div>
  <div class="helper" id="blockchain"></div>
  <div class="helper" id="internet-things"></div>
  <div data-cat="java">Everything about Java Spring</div>
  <div data-cat="blockchain">A bitcoin project</div>
  <div data-cat="java">Eclipse IDE Java</div>
  <div data-cat="blockchain">Ripple Network</div>
  <div data-cat="internet-things">Smart Thermostate</div>
  <div data-cat="java">IntelliJ IDEA Community Edition</div>
  <div data-cat="java">Java SDK 9.0</div>
  <div data-cat="java">Java SDK 8.0</div>
  <div data-cat="blockchain">Ethereum tokens ICO</div>
  <div data-cat="internet-things">Walking Fridge</div>
  <div data-cat="blockchain">Bitcoin 3.0</div>
  <div data-cat="internet-things">Aibo</div>
</div>

각 카테고리에 대한 CSS 규칙 (동적 일 가능성이 높음)에 의존하기 때문에 프로덕션 환경에서 사용하는 것은 아니지만 CSS 도전 과제로 여전히 재미 있습니다.