上下文选择器及状态伪类实现一个下拉菜单功能

一、上下文选择器

根据元素位置与层级匹配元素

1.父子 >大于号
2.后代 空格
3.兄弟 +加号
4.同级 ~波浪线

实战演示

1.父子>

<ul class="list">
      <li class="item">item1</li>
      <li class="item">item2</li>
      <li class="item">item3</li>
</ul>

.list > .item {
border: thin solid;
}

2.后代空格

<ul>
 <li class="item">item1</li>
 <li class="item">item2</li>
 <li class="item">item3
 <ul>
  <li class="item">item1</li>
  <li class="item">item2</li>
  <li class="item">item3</li>
  </ul>
  </li>
</ul>

.list   .item {
border: thin solid;
}

3.兄弟 +加号

<ul class="list">
    <li class="item">item1</li>
    <li class="item start">item2</li>
    <li class="item">item3</li>
</ul>

.list > .item.start + * {
background-color: bule;
}

4.同级 ~波浪线

<ul class="list">
    <li class="item">item1</li>
    <li class="item start">item2</li>
    <li class="item">item3</li>
</ul>

.list > .item.start ~ * {
  background-color: green;
}

二、状态伪类实现一个下拉菜单功能

<div class="box">
<label for="menu">下拉演示</label>
<input type="checkbox" name="xxx" id="menu" />
<ul>
<li><a href="">item1</a></li>
<li><a href="">item2</a></li>
<li><a href="">item3</a></li>
</ul>
</div>

#menu {
display:none;
}
#menu + ul {
display: none;
}
#menu:checked + ul {
display:block;
}