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

Question

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

我见过这样的作品；

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

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

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

语法会怎样？

我正在尝试在 header 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>

这是一个 fiddle link