如何让复选按钮在 CSS 中起作用？

Question

我尝试使用 css 设计 checkbtn，但它无法正常工作。检查伪元素和悬停元素似乎不起作用，实际上我正在尝试为导航制作一个汉堡包按钮关于如何修复此代码的任何想法？

.checkbtn {
  display: block;
  line-height: 40px;
  font-weight: 500;
  margin-top: 20px;
  margin-right: 30px;
}

.header .navbar {
  flex: 1;
}

.header .navbar ul {
  position: fixed;
  background-color: darkgreen;
  background-size: cover;
  width: 100%;
  height: 50vh;
  top: 72px;
  right: -100%;
  transition: all .5s;
  text-align: center;
  list-style: none;
}

.header .navbar ul li {
  display: block;
  margin-top: 35px;
}

.header .navbar ul li a {
  text-decoration: none;
  margin: 20px;
  color: white;
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
}

*these hover psuedos don't work as well.*
 .navbar ul li a:hover,
a.after {
  background-color: none;
  color: darkred;
}


/* This psuedo element is failing to work */

#check:checked~.ul {
  right: 0;
}

<div class="navbar">
  <ul>
    <li>
      <a href="/">Home</a>
    </li>
    <li>
      <a href="about.html">About</a>
    </li>
  </ul>
</div>
<div class="burger">
  <label for="check" class="checkbtn">&#9776;</label>
  <input type="checkbox" id="check">
</div>

Answer 1

.navbar ul li a:hover ,a.after{

在这一行中，您有 a.after - 这是在寻找锚标记“a”，class 为“after”。如果您打算使用 psuedo-element :after 它应该是 CSS3 中的 a::after （或 CSS2 中的 a:after - 两者都可以），如下所述：https://developer.mozilla.org/en-US/docs/Web/CSS/::after

对于您的复选框：

#check:checked ~ .ul{

您正在使用通用同级组合符“~”。 MDN 对此是这样说的：

The general sibling combinator (~) separates two selectors and matches all iterations of the second element, that are following the first element (though not necessarily immediately), and are children of the same parent element.

参考：https://developer.mozilla.org/en-US/docs/Web/CSS/General_sibling_combinator

在您的 HTML 复选框中之后没有无序列表标签。这意味着 CSS 找不到任何要设置样式的元素。复选框需要在您想要影响的标签之前，并且 在同一父标签 内（即它们需要是“兄弟姐妹”） .

注意：您仍然可以使用 CSS

将复选框定位到其他位置

如何让复选按钮在 CSS 中起作用？

How can I make the check button work in CSS?

html

css

media-queries