Question

CSS：

nav a{
    display: none;
}


#menubutton:checked, nav a{
    display: block;
    color: black;
    text-decoration: none;
}

HTML：

<nav>
    <a href="#" id="closenav"><img src="pictures/close.png" alt="Close"  height="20" width="20"></a>
    <a class="navitem" id="firstnavitem" href="index.php">Home</a>
    <a class="navitem" href="#">Test</a>
    <a class="navitem" href="#">Test</a>
    <a class="navitem" href="#">Test</a>
</nav>

我希望在#menubutton为:checked之前不会显示HTML代码。（#menubutton是一个不可见的复选框）。

如果我想要的#menubutton是:checked，则会显示HTML代码。应显示的代码位于css“nav a {}”。

Answer 1

使用 adjacent sibling selector +。

＆＃13;

#menubutton {
  display: none;
}

nav * {
  display: none;
}


#menubutton:checked + nav * {
  display: block;
  color: black;
  text-decoration: none;
}

#closeMenu {
  height: 20px;
  width: 20px;
}

＆＃13;

<label for="menubutton">MenuButton</label>
<input type="checkbox" id="menubutton" />
<nav>
    <label for="menubutton"><img src="pictures/close.png" alt="close menu" id="closeMenu" /></label>
    <a class="navitem" id="firstnavitem" href="index.php">Home</a>
    <a class="navitem" href="#">Test</a>
    <a class="navitem" href="#">Test</a>
    <a class="navitem" href="#">Test</a>
</nav>

＆＃13;

如果您的#menubutton和nav元素之间存在其他元素，则可能需要使用 general sibling selector ~代替。

Answer 2

CSS

input[type=checkbox] + label {
  color: #ccc;
  font-style: italic;
} 
input[type=checkbox]:checked + label {
  color: #f00;
  font-style: normal;
}

HTML

<input type="checkbox" id="ossm" name="ossm"> 
<label for="ossm">CSS is Awesome</label>

Answer 3

这适用于使用:target psuedo类的纯CSS和HTML。它适用于IE 9。See MSDN for more info.

小心：:target psuedo-class依赖于当前网址的片段（或哈希），因此可能会搞乱内部网页导航

#menu {
  display: none;
}

#menu:target {
  display: block;
}

<a href="#menu">Menu</a>
<nav id="menu">
    <a href="#">Close</a> | 
    <a class="navitem" id="firstnavitem" href="index.php">Home</a> | 
    <a class="navitem" href="#">Test</a> | 
    <a class="navitem" href="#">Test</a> | 
    <a class="navitem" href="#">Test</a>
</nav>

css＆amp; html：选中的属性

3 个答案: