仅使用CSS隐藏点击链接

Question

我刚开始接触编程（几周前刚刚学习了HTML和CSS）。为新闻页面，我尝试实现“阅读更多”链接，类似于这个问题：on click hide this (button link) pure css

然而，我似乎无法在单击后使链接消失。到目前为止，我的代码如下（打开和关闭都可以正常工作）：

.readmore {
  display: none;
}

article[id*="n"]:target .readmore {
  display: block;
}

article:target .used {
  display: none;
}

<article>Text visible after you open the site.


  <a href="#n2" class="used">Link that opens more text and should diappear after clicking</a>

  <article id="n2">
    <div class="readmore">more text
     <a href="#back">Closing button</a>
    </div>
  </article>
</article>

我感觉自己犯了一个非常严重的错误，但我真的无法找出问题所在。

- Mjyrn

---

:target matches an element with the id of the URL's fragment, but that element (#n2) has no children .used - Ricardo Ribeiro

Answer 1

只需将您的链接放在文章标签内，包括您的ID。

.readmore {
  display: none;
}

article[id*="n"]:target .readmore {
  display: block;
}

article[id*="n"]:target .used {
  display: none;
}

<article>Text visible after you open the site.

  <article id="n2">
    <a href="#n2" class="used">Link that opens more text and should diappear after clicking</a>
    <div class="readmore">more text
      <a href="#back">Closing button</a>
    </div>
  </article>
</article>

- bhansa

Answer 2

使用这个方法，你可以实现你想要的效果......你已经添加了id为inner article，你需要将它放在父级article下，并改变CSS样式。

.readmore {
  display: none;
}

#n2:target .readmore {
  display: block;
}

#n2:target .used {
  display: none;
}

.readmore {
  display: none;
}

#n2:target .readmore {
  display: block;
}

#n2:target .used {
  display: none;
}

<article id="n2">Text visible after you open the site.


  <a href="#n2" class="used">Link that opens more text and should diappear after clicking</a>

  <article>
    <div class="readmore">more text
     <a href="#back">Closing button</a>
    </div>
  </article>
</article>

- Hiren Vaghasiya

---

你应该解释问题是什么，以及你是如何解决它的。 - Ricardo Ribeiro

@RicardoRibeiro 好的，当然可以。 - Hiren Vaghasiya

最好在所有文章中使用与问题中使用的相同选择器。＃n2仅适用于一个ID。 - bhansa