这里的想法是label元素，它可以创造出令人惊叹的东西。
玩它可以产生一堆伟大的效果。
您只需要隐藏单选框或复选框并处理其标签，并且您需要知道三个重要的css selectors来实现此效果：
1.一般的下一个兄弟姐妹：element ~ sibling{ style }，选择在element之后找到的所有sibling
1.直接下一个同级：element + sibling{ style }，仅选择element之后的第一个sibling
1.选中的输入选择器：input:checked{ style }，仅在选中时选择输入。
这种效果可以通过以下步骤实现：

• 为您需要的每种选择创建input和label
• 使用for和id将每个input与其label连接
• 使用类似display: none * 或其他 * 的命令隐藏输入
• 设置标注的样式，该样式将成为默认模式
• 为放置在选中输入input:checked + lebel{ style }之后的标注设置新样式

现在我们可以应用它：

nav{
    width: fit-content;
    border: 1px solid #666;
    border-radius: 4px;
    overflow: hidden;
    display: flex;
    flex-direction: row;
    flex-wrap: no-wrap;
}
nav input{ display: none; }
nav label{
    font-family: sans-serif;
    padding: 10px 16px;
    border-right: 1px solid #ccc;
    cursor: pointer;
    transition: all 0.3s;
}
nav label:last-of-type{ border-right: 0; }
nav label:hover{
    background: #eee;
}
nav input:checked + label{
    background: #becbff;
}

<nav>
    <input type="radio" id="x1" name="x"/>
    <label for="x1">Choice 1</label>
    
    <input type="radio" id="x2" name="x"/>
    <label for="x2">Choice 2</label>
    
    <input type="radio" id="x3" name="x"/>
    <label for="x3">Choice 3</label>
    
    <input type="radio" id="x4" name="x"/>
    <label for="x4">Choice 4</label>
    
    <!-- as many choices as you like -->
</nav>

现在已经结束了。
您可以在codepen上搜索许多想法，您可以看到这个伟大的导航栏只使用css和导航抛出不同的页面：
Nav Bar Using Only CSS
或者看看这个折叠的导航栏，它也可以只使用css打开或关闭：
Open & Close Nav Bar Using CSS

要对复选框或单选按钮进行样式设置，你需要隐藏真实的的输入，并对另一个元素进行样式设置，使其看起来像你所需要的那样。请参考w3schools页面，了解如何做到这一点：https://www.w3schools.com/howto/howto_css_custom_checkbox.asp

你需要隐藏真实的的输入，并设计另一个元素使其看起来像你需要的那样。2请参考
<input type='checkbox' name='checkbox-btns' id='checkbox-btn-2'/> <label htmlFor='checkbox-btn-2' class='btn'> Unsafe</label>

input[type=checkbox]{display:none;}
 
input[type=checkbox] + label.btn{
  width:300px;
    padding: 5px 5px;
    text-align: center;
    margin: 5px 5px;
    display: inline-block;
    text-transform: capitalize;
    font-size: 10px;
    font-weight: 600;
    outline: none;
    position: relative;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
    border: 1px solid #0088cc;
    color: #0088cc;
    -webkit-transition: none;
    -moz-transition: none;
    transition: none;
    border-radius: 10px;
    cursor: pointer;
}

 
input[type=checkbox]:checked + label.btn{
  background: #0088cc;
  color:white;
}