HTML锚标记＆：target [duplicate]

Question

此问题已经在这里有了答案：

What does a space mean in a CSS selector? i.e. What is the difference between .classA.classB and .classA .classB?（4个答案）

关闭3个月前。

我有一个水平滚动条，并且其中有一些锚标记。这些锚标记的href是一些div标记的ID：

/*horizontal bar*/
<div>
   <a href="#everything">Everything</a>
   <a href="#fruits">Fruits</a>
   <a href="#vegetables">Vegetables</a>
</div>

/*text*/
<div class="text" id="everything">
  <div id="fruits">
     ...
  </div>
  <div  id="vegetables">
    ...
   </div>
</div>

我已经在CSS中完成此操作：

.text {
    display: none;}
.text:target {
    display: block;}

我尝试了所有操作，仅当您单击“所有”锚标签时，此功能才起作用，但是我想这样做如果单击“所有”，它将显示全文，但是如果单击“水果”，则仅显示有关水果的文字并隐藏蔬菜的文字，我如何使它起作用？

Answer 1

您的:target是.text的子代。相应地更新您的css。

EG：

/* hide all .text child divs: */
.text div {display: none;}
/* show all .text child divs if .text is the target: */
.text:target div {display: block;}
/* show the specific target .text child div */
.text div:target {display: block;}

<div>
   <a href="#everything">Everything</a>
   <a href="#fruits">Fruits</a>
   <a href="#vegetables">Vegetables</a>
</div>

<div class="text" id="everything">
  <div id="fruits">
     ...fruits...
  </div>
  <div  id="vegetables">
    ...veg...
   </div>
</div>