使用css隐藏和显示元素

Question

我正在学习html，css和php的第一步。我在互联网上开了一些课程，现在我决定用Wordpress创建一个网站，这样我就可以继续学习这个实践。

问题是我制作了一个页面，其中包含视频的自定义字段和描述的自定义字段。

正如您在图片中看到的那样，我使用名为About in html的详细信息标记隐藏了描述的所有文本。

当我点击关于我的时候，我看到了：

我的问题是： 如何在显示其他元素时隐藏某些元素？我想打开此页面，只看到文本和关闭按钮。这意味着当细节打开时，页面不应显示“菜单”链接和“奇怪的魔法”标题。

我已经试过这个，但它不起作用：

details[open] .entry-title .menu-toggle{
    display: none;
} 

你有什么建议吗？使用css可以做些什么？

Answer 1

我认为你应该试试这个，也许它会帮助你......

label {
  display:block;
  margin:20px 0 10px 0;
}
label:hover {
  text-decoration:underline;
}
input {
  position:absolute;
  left:-999em
}
.hide {
  width:50%;
  border:1px solid #000;
  background:rgba(148, 148, 148, 0.33);
  box-shadow: 3px 3px 10px;
  max-height:999em;
  opacity:1;
  height:auto;
  overflow:hidden;
  transition:opacity .5s linear;
}
.hide p {
  padding:10px;
  margin:0
}
input[type=checkbox]:checked + div {
  opacity:0;
  max-height:0;
  border:none;
  transition:opacity .5s linear, max-height .5s linear;
}
.follow{
  border-top:1px solid blue;margin:0;
}

演示：https://jsfiddle.net/Pratik_009/t41nn2nh/