用一个目标选择器指定两个元素

Question

您好，我正在尝试让链接同时更改两种元素样式。但我不确定在这种情况下语法会如何。

我见过类似的作品；

#header:target #buttons-container a.open-menu-primary{
    display: none;
}

我的阅读方式是，它从 HTML 中使用的链接中的选择器锚开始，然后指定选择器的路径，并以手镯内的样式结束。

我得到了这个工作，但现在我希望同一个锚/链接同时定位另一个元素。所以同时有两个元素。显示菜单按钮变为关闭菜单，导航 div 显示或隐藏。

语法如何？

我正在尝试在标题 div 中制作一个纯 css 显示和隐藏菜单按钮，以它自己的样式和导航 div 的样式为目标。

这里是代码；

#header {
    width: 100%;
    height:100px;
}
/* Hide Menu*/
#mainmenu{
    display: none;
}
#buttons-container a.close-menu-primary{
    display: none;
}

/* Display Menu Items */
#header:target #mainmenu{
    display: block;
}
#buttons-container a.close-menu-primary{
    display: none;

}
/* Hide Open Toggle Link */
#header:target #buttons-container a.open-menu-primary{
    display: none;
}
/* Show Close Toggle Link */
#header:target #buttons-container a.close-menu-primary{
    display: block;
}
</style>

HTML 代码

<div class="header-div" id="header">
<div id="buttons-container" >
            <a href="#header" class="open-menu-primary"><span>menu</a>
            <a href="#" class="close-menu-primary"><span>close</span></a>
</div>
</div>
  <nav class="navigation" id="navigation">
  <ul class="mainmenu" id="mainmenu">
    <li><a href="">main1</a></li>
    <li><a href="">main2</a>
      <ul id="submenu">
                <li><a href="#">sub1</a></li>
                <li><a href="#">sub2/a></li>
      </ul>
    </li>
    <li><a href="">main3</a></li>
  </ul>
</nav>

Answer 1

我定位包含我想要定位的两个目标的元素。 CSS 代码：

.wrap {
    width:100%;
    height:100%;
}
}
.header {
    width: 100%;
    height:100px;
}
#buttons-container {
    background-color: #006cad;
    text-align:right;
    padding:16px;
}
/* Hide Menu*/
#mainmenu{
    display: none;
}
#buttons-container a.close-menu-primary{
    display: none;
}
/* Display Menu Items */
#wrap:target .navigation #mainmenu{
    display: block;
}
#buttons-container a.close-menu-primary{
    display: none;

}
/* Hide Open Toggle Link */
#wrap:target #buttons-container a.open-menu-primary{
    display: none;
}
/* Show Close Toggle Link */
#wrap:target #buttons-container a.close-menu-primary{
    display: block;
}

HTML 代码：

<div id="wrap">
<div class="header" id="header">
<div id="buttons-container" >
                <a href="#wrap" class="open-menu-primary"><span>menu</a>
                <a href="#" class="close-menu-primary"><span>close</span></a>
</div>
</div>
      <nav class="navigation" id="navigation">
      <ul class="mainmenu" id="mainmenu">
        <li><a href="">main1</a></li>
        <li id="hover-sub"><a href="javascript:void(0)">main2</a>
          <ul id="submenu">
                <li class="menu-item"><a href="#">sub1</a></li>
                <li class="menu-item"><a href="#">sub2</a></li>
          </ul>
        </li>
        <li><a href="" class="con">main3</a></li>
      </ul>
    </nav>
</div>

这是一个小提琴link

Answer 2

我相信您正在寻找以逗号分隔的选择器列表。如果我想隐藏所有 h1 和所有跨度，我可以写

h1, span {
      display: none;
}

或者至少是你的例子的一部分

 /* Hide Menu*/
 #mainmenu, #buttons-container a.close-menu-primary {         
      display: none;
 }