>

여기서 필터가 작동하지 않는 이유는 무엇입니까?

.btns a {
  display: block;
  float: left;
  text-decoration: none;
  text-align: center;
  padding: 10px;
  margin: 0 5px 0 0;
  color: white;
  background: #1271C7;
}
.btns a:focus[cat] {
  background-color: grey;
}
.btns a[cat="java"]:focus ~ .post div:not([cat="java"]),
.btns a[cat="internet-things"]:focus ~ .post div:not([cat="internet-things"]),
.btns a[cat="blockchain"]:focus ~ .post div:not([cat="blockchain"]) {
  display: none;
}
.post div {
  display: block;
  float: left;
  width: 99%;
  border: 1px solid black;
  margin-top: 20px;
  background-color: lightgrey;
}

<div class="btns">
  <a href="#" cat="all">Show all</a>
  <a href="#" cat="java">Java</a>
  <a href="#" cat="internet-things">Internet of Things</a>
  <a href="#" cat="blockchain">Blockchain</a>
</div>
<div class="post">
  <div cat="java">Everything about Java Spring</div>
  <div cat="blockchain">A bitcoin project</div>
  <div cat="java">Eclipse IDE Java</div>
  <div cat="blockchain">Ethereum tokens ICO</div>
  <div cat="internet-things">Walking Fridge</div>
  <div cat="blockchain">Bitcoin 3.0</div>
  <div cat="internet-things">Aibo</div>
</div>

작동하지 않는 예 : https://jsfiddle.net/3qbvvt50/2/

<div class="btns"> 를 제거하면 필터가 작동하는 동안  HTML에서 .btns 를 제거  CSS에서.

작업 예 : https://jsfiddle.net/3qbvvt50/3/

  • 답변 # 1

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

    위에 게시 한 코드에서 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>
    
    

  • 답변 # 2

    라디오 버튼 솔루션은 아마도 처음에는 함께 할 것이지만 <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 도전 과제로 여전히 재미 있습니다.

관련 자료

  • 이전 android - 카메라 의도 - 사진 촬영 후 데이터가 null
  • 다음 data warehouse - 사실이없는 팩트 테이블의 대리 키