仅针对 CSS 中父子对象中相同类的第一个直接匹配

Question

我不知道标题是否有点令人困惑，但是这个 sn-p 会更好地解释它。

function select(event) {
	$('li').removeClass('is-active');
  $(event.target).parent().addClass('is-active');
}

.item {
  background-color: #c3c3c3;
  display: flex;
  flex-direction: column;
  margin-top: 5px;
  margin-bottom: 5px;
}

.item.is-active .itemName {
  background-color: red;
}

.item:hover {
  cursor: pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li class="item" onclick="select(event)">
    <span class="itemName">Parent</span>
  </li>
  <li class="item" onclick="select(event)">
    <span class="itemName">Parent</span>
    <ol>
      <li class="item" onclick="select(event)">
        <span class="itemName">Children</span>
      </li>
      <li class="item" onclick="select(event)">
        <span class="itemName">Children</span>
      </li>
    </ol>
  </li>
</ul>

单击第一个父级，父级将具有红色背景。 现在单击第二个父级，父级和子级现在将具有红色背景。

我想防止这种情况发生。如果我点击父母，父母应该只涂成红色，不管它有多少孩子。

那么 CSS 会是什么？无需添加这么多额外的课程？就我而言，父母和孩子都是共享相同样式的列表项。

我在考虑使用 :not() 吗？但这需要为每个孩子增加一个额外的课程。有没有其他方法可以解决这个问题？

谢谢。

Answer 1

删除每个元素的全局事件属性。将 CSS 调整为

.is-active {
  background-color: red;
}

并将click 事件附加到.item .itemName 或仅.itemName

function select(event) {
  $('*').removeClass('is-active');
  $(this).addClass('is-active');
}

$('.item .itemName').on('click', select);

.item {
  background-color: #c3c3c3;
  display: flex;
  flex-direction: column;
  margin-top: 5px;
  margin-bottom: 5px;
}

.is-active {
  background-color: red;
}

.item:hover {
  cursor: pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li class="item">
    <span class="itemName">Parent</span>
  </li>
  <li class="item">
    <span class="itemName">Parent</span>
    <ol>
      <li class="item">
        <span class="itemName">Children</span>
      </li>
      <li class="item">
        <span class="itemName">Children</span>
      </li>
    </ol>
  </li>
</ul>

Answer 2

使用.item.is-active>.itemName 代替.item.is-active .itemName。

请看下面的片段：

function select(event) {
	$('li').removeClass('is-active');
  $(event.target).parent().addClass('is-active');
}

.item {
  background-color: #c3c3c3;
  display: flex;
  flex-direction: column;
  margin-top: 5px;
  margin-bottom: 5px;
}

.item.is-active>.itemName {
  background-color: red;
}

.item:hover {
  cursor: pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li class="item" onclick="select(event)">
    <span class="itemName">Parent</span>
  </li>
  <li class="item" onclick="select(event)">
    <span class="itemName">Parent</span>
    <ol>
      <li class="item" onclick="select(event)">
        <span class="itemName">Children</span>
      </li>
      <li class="item" onclick="select(event)">
        <span class="itemName">Children</span>
      </li>
    </ol>
  </li>
</ul>