Question

我有一个看起来像这样的菜单：

<div class="grid-all" >
    <div class="grid-item" style=" background-color: blue;"></div>
    <div class="grid-item" style=" background-color: yellow;"></div>
    <div class="grid-item height2" style="clear: both;"></div>
    <div class="grid-item" style=" background-color: green;"></div>
    <div class="grid-item" style=" background-color: black;"></div>
</div>

我需要单独设置父母和儿童菜单的样式，但我似乎无法获得如何选择它们和样式。任何帮助赞赏！：）

Answer 1

仅选择更高级<li>：

.myclass > ul > li

选择较低级<li>：

.myClass > ul > li > ul > li

这里的关键是使用直接子选择器>。看到 https://developer.mozilla.org/en-US/docs/Web/CSS/Child_selectors

Answer 2

对于父母，你喜欢这样：

.myclass > ul > li

对于孩子：

.myclass > ul > li > ul > li

Answer 3

试试这个：

为父母

.myClass > ul > li

样品：

$( ".myClass > ul > li" ).css( "color", "green" );

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="myClass" >
    <ul>
  <li>Coffee</li>
  <li>
    <ul>
    <li>Tea</li>
    <li>Black Tea</li>
    </ul>
  </li>
  <li>Milk</li>
</ul>
</div>

为孩子

.myClass > ul > li > ul > li

样品：

$( ".myClass > ul > li > ul > li" ).css( "color", "green" );

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="myClass" >
    <ul>
  <li>Coffee</li>
  <li>
    <ul>
    <li>Tea</li>
    <li>Black Tea</li>
    </ul>
  </li>
  <li>Milk</li>
</ul>
</div>

如何在CSS中选择父项而不是子项？

3 个答案: