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 code：

<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;
 }

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

2 个答案: