html - 如何在我的 CSS 样式定义中排除没有子菜单的元素？

Question

我正在为我的网站制作菜单。

/*General styles for body*/
span, a, p, label {
	font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
    font-size: 14px;
    color: #767676;
	text-decoration: none;
}

a:hover {
  color: hotpink;
	font-weight: bolder;
	font-size: 14px;
	text-shadow: 5px 4px 21px -5px rgba(0,0,0,0.6);
}
label:hover {
  color: hotpink;
	font-weight: bolder;
	font-size: 14px;
	text-shadow: 5px 4px 21px -5px rgba(0,0,0,0.6);
}

/*Style for the first level menu bar*/
ul#menu{
  display:block;
  text-align: center;
}

ul#menu > li{
  margin-left: auto;
	margin-right: auto;
	margin-bottom: 12px;
  max-width:30%;
  list-style-type:none;
  position:relative;
  -webkit-box-shadow: 5px 4px 27px -3px rgba(0,0,0,0.23);
	-moz-box-shadow: 5px 4px 27px -3px rgba(0,0,0,0.23);
	box-shadow: 5px 4px 27px -3px rgba(0,0,0,0.23);
}

label{
  position:relative;
  display:block;
  padding:0 18px 0 18px;
  line-height:3.5em;
  transition:background 0.3s;
  cursor:pointer;
}

label:after{
  content:"";
  position:absolute;
  display:block;
  top:50%;
  right:25px;
  width:0;
  height:0;
  border-top:4px solid rgba(0,0,0,.3);
  border-bottom:0 solid rgba(0,0,0,.3);
  border-left:4px solid transparent;
  border-right:4px solid transparent;
  transition:border-bottom .1s, border-top .1s .1s;
  }

label:hover,
input:checked ~ label{background:rgba(200,255,138,.4);}

input:checked ~ label:after{
  border-top:0 solid rgba(0,0,0,.3);
  border-bottom:4px solid rgba(0,0,0,.3);
  transition:border-top .1s, border-bottom .1s .1s;
}

/*hide the inputs*/
input{display:none}

/*show the second levele menu of the selected voice*/
input:checked ~ ul.submenu{
  max-height:300px;
  transition:max-height 0.5s ease-in;
}

/*style for the second level menu*/
ul.submenu{
  max-height:0;
  padding:0;
  overflow:hidden;
  list-style-type:none;
  background:#fff;
  transition:max-height 0.5s ease-out;
  position:relative;
  min-width:100%;
}

ul.submenu li a{
  display:block;
  padding:12px;
  text-decoration:none;
  box-shadow:0 -0.2px rgba(0,0,0,.2) inset;
  transition:background .3s;
  white-space:nowrap;
}

ul.submenu li a:hover{
  background:rgba(50,160,90,.2);
}

<p>Lorem ipsum dolor </p>

<ul id="menu">
   <li>
    <a href="#">
    <input id="check01" type="button"/>
    <label  for="check01">just button</label>
    </a>
  </li>
  <li>
    <input id="check02" type="checkbox" name="menu"/>
    <label for="check02">more stuff here</label>
    <ul class="submenu">
      <li><a href="#">stuff1</a></li>
      
  <li >
    <input id="check03" type="checkbox" name="menu"/>
    <label for="check03">bunch of other stuff</label>
    <ul class="submenu" style="background:#e7e7e7">
      <li><a href="#">bunch 1</a></li>
      <li><a href="#">bunch 2</a></li>
    </ul>
  </li>
      <li><a href="#">stuff 2</a></li>
    </ul>
  </li>
</ul> 
<br>
<article>
  <p>Lorem ipsum dolor </p>
</article>

我已经修改了一些我发现的我喜欢的例子，除了一件事 - “按钮”元素旁边显示的小箭头。这是支持仅在下拉菜单旁边显示的。现在，它就在那里，因为所有 <li> 都有一条规则#menu 下的标签但是有没有一种优雅的方法可以排除那些没有子菜单的内容？这个菜单已经很复杂了，我能想到的所有解决方案只会让它变得更糟。

Answer 1

小箭头在css中定义为

label:after{
...
}

要排除您只想作为按钮的标签，您可以向该标签添加一个类属性，然后从您的标签的 css 声明中排除具有该类的标签

label:not(.buttonLabel):after{
  ...
}

/*General styles for body*/
span, a, p, label {
	font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
    font-size: 14px;
    color: #767676;
	text-decoration: none;
}

a:hover {
  color: hotpink;
	font-weight: bolder;
	font-size: 14px;
	text-shadow: 5px 4px 21px -5px rgba(0,0,0,0.6);
}
label:hover {
  color: hotpink;
	font-weight: bolder;
	font-size: 14px;
	text-shadow: 5px 4px 21px -5px rgba(0,0,0,0.6);
}

/*Style for the first level menu bar*/
ul#menu{
  display:block;
  text-align: center;
}

ul#menu > li{
  margin-left: auto;
	margin-right: auto;
	margin-bottom: 12px;
  max-width:30%;
  list-style-type:none;
  position:relative;
  -webkit-box-shadow: 5px 4px 27px -3px rgba(0,0,0,0.23);
	-moz-box-shadow: 5px 4px 27px -3px rgba(0,0,0,0.23);
	box-shadow: 5px 4px 27px -3px rgba(0,0,0,0.23);
}

label{
  position:relative;
  display:block;
  padding:0 18px 0 18px;
  line-height:3.5em;
  transition:background 0.3s;
  cursor:pointer;
}

label:not(.buttonLabel):after{
  content:"";
  position:absolute;
  display:block;
  top:50%;
  right:25px;
  width:0;
  height:0;
  border-top:4px solid rgba(0,0,0,.3);
  border-bottom:0 solid rgba(0,0,0,.3);
  border-left:4px solid transparent;
  border-right:4px solid transparent;
  transition:border-bottom .1s, border-top .1s .1s;
  }

label:hover,
input:checked ~ label{background:rgba(200,255,138,.4);}

input:checked ~ label:after{
  border-top:0 solid rgba(0,0,0,.3);
  border-bottom:4px solid rgba(0,0,0,.3);
  transition:border-top .1s, border-bottom .1s .1s;
}

/*hide the inputs*/
input{display:none}

/*show the second levele menu of the selected voice*/
input:checked ~ ul.submenu{
  max-height:300px;
  transition:max-height 0.5s ease-in;
}

/*style for the second level menu*/
ul.submenu{
  max-height:0;
  padding:0;
  overflow:hidden;
  list-style-type:none;
  background:#fff;
  transition:max-height 0.5s ease-out;
  position:relative;
  min-width:100%;
}

ul.submenu li a{
  display:block;
  padding:12px;
  text-decoration:none;
  box-shadow:0 -0.2px rgba(0,0,0,.2) inset;
  transition:background .3s;
  white-space:nowrap;
}

ul.submenu li a:hover{
  background:rgba(50,160,90,.2);
}

<p>Lorem ipsum dolor </p>

<ul id="menu">
   <li>
    <a href="#">
    <input id="check01" type="button"/>
    <label for="check01" class="buttonLabel">just button</label>
    </a>
  </li>
  <li>
    <input id="check02" type="checkbox" name="menu"/>
    <label for="check02">more stuff here</label>
    <ul class="submenu">
      <li><a href="#">stuff1</a></li>
      
  <li >
    <input id="check03" type="checkbox" name="menu"/>
    <label for="check03">bunch of other stuff</label>
    <ul class="submenu" style="background:#e7e7e7">
      <li><a href="#">bunch 1</a></li>
      <li><a href="#">bunch 2</a></li>
    </ul>
  </li>
      <li><a href="#">stuff 2</a></li>
    </ul>
  </li>
</ul> 
<br>
<article>
  <p>Lorem ipsum dolor </p>
</article>