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

Question

您好，我正在尝试 link 一次更改两种元素样式。但我不确定在那种情况下语法会怎样。

我看过这样的作品；

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

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

我得到了这个工作，但现在我想要相同的 anchor/link 同时定位另一个元素。所以同时有两个元素。 show-menu 按钮变为 close-menu 并且导航 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

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

h1, span {
      display: none;
}

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

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

Answer 2

我定位了包含我想要定位的两个目标的元素。 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>

这是一个Fiddlelink

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

specify two elements with one target selector

html

css

target