仅将css规则应用于父级

Question

我有以下代码：

<div id="sidebar" style="float:right;">
<li id="test" class="widget woocommerce widget_product_categories">
<ul class="product-categories">
<li class="cat-item cat-item-45 current-cat cat-parent">
<ul class="children">
<li class="cat-item cat-item-76"></li>
<li class="cat-item cat-item-77"></li>
<li class="cat-item cat-item-78"></li>
<li class="cat-item cat-item-79"></li>
<li class="cat-item cat-item-80"></li>
<li class="cat-item cat-item-81"></li>
</ul>
</li>
</div>

我想申请css规则：

background-color:red;

仅限于使用.current-cat类

的li

到目前为止，我已经成功地将这个规则应用到包含另一个ul里面的所有li中，所以我得到了大量的红色instaed只有当前的li 我使用了这个规则：

ul > li.current-cat{background-color:#F98562;}

EDIT 与Vitorino Fernandes帮助我设法获得TO THIS，因为你可以看到红线仍在未选择的李的左侧。

Answer 1

尝试验证您的HTML。你会发现它无效。 <ul>唯一有效的孩子是<li>，您不能在<li>内拥有<div>。

来源：http://www.w3.org/TR/html-markup/li.html#li-context

写如下，你的CSS应该有效：

<ul>
    <li class="current-cat"></li>
</ul>

Answer 2

你有一些未公开的标签

.cat-item也取.current-cat的高度，所以孩子们也会选择父母的背景

为子sub li设置不同的背景，如示例

演示 - http://jsfiddle.net/victor_007/5mff7Lj9/

修改

根据您的评论为列表样式添加了伪元素:before

演示 - http://jsfiddle.net/victor_007/5mff7Lj9/3/

* {
  /* margin:0;
    padding:0;*/
}
ul {
  margin: 0;
  /*list-style:none;*/
}
ul > li.current-cat {
  background-color: #F98562;
}
ul ul > li.current-cat li {
  background-color: white;
}
ul > li.current-cat ul {
  padding: 0px;
  list-style: none;
}
ul > li.current-cat ul li {
  padding-left: 35px;
  position: relative;
}
ul > li.current-cat ul li:before {
  content: '\25AA';
  position: absolute;
  left: 14px;
}

<div id="sidebar">
  <ul>
    <li id="test" class="widget woocommerce widget_product_categories">test1
      <ul class="product-categories">
        <li class="cat-item cat-item-45 current-cat cat-parent">test2
          <ul class="children">
            <li class="cat-item cat-item-76">test3</li>
            <li class="cat-item cat-item-77">test4</li>
            <li class="cat-item cat-item-78">test5</li>
            <li class="cat-item cat-item-79">test6</li>
            <li class="cat-item cat-item-80">test7</li>
            <li class="cat-item cat-item-81">test8</li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</div>