Question

为什么过滤器不在这里工作？

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

不工作的例子：https://jsfiddle.net/3qbvvt50/2/

虽然过滤器可行，但当我从HTML中删除<div class="btns">并从CSS中删除.btns时。

工作示例：https://jsfiddle.net/3qbvvt50/3/

Answer 1

一般兄弟组合子（a[cat="java"]）和相邻的兄弟组合子（<div cat="java">），它们仅适用于直接兄弟姐妹的元素。

在上面发布的代码<label>和<input type="radio">中，它们位于不同的父div之下，因此兄弟选择器将无效。

对于此标签，您可以获得的最佳结果是使用普通CSS的布局，我想是使用cat=和data-cat=。请注意，我还将.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>以获得正确的标记。

<强> jsFiddle

{{}}

enum Index{ salary, age };

static const Datas Mydata [] = 
{
[Index::one] = {"hello", function_call_ptr_1, function_call_ptr_2}, 
[Index::two] = "hekllo1",  function_call_ptr_1, function_call_ptr_2}
};

Answer 2

单选按钮解决方案可能就是我最初使用的解决方案，但由于您需要使用<a>标签并为按钮和内容分别设置包装类，因此您可以使用：target selector在一些辅助div上充当兄弟姐妹，并使用：not selector和attr过滤掉选项。

＆＃13;

.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;}

＆＃13;

<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>

＆＃13;

我不会在制作中使用它，因为它依赖于每个类别都有一个CSS规则（很可能是动态的），但作为CSS挑战仍然非常有趣。

为什么家长CSS课程不被认可？

2 个答案: