Question

我在HTML中有这个列表

<div id="sideMenu">
    <li class="current_page_parent">
        <a href="#">Category 1</a>
        <ul class="children">
            <li><a href="#">Sub</a></li>
            <li><a href="#">Sub</a></li>
            <li><a href="#">Sub</a></li>
            <li><a href="#">Sub</a></li>
        </ul>
    </li>
    <li></li>
    <li></li>
</div>

我想在第一个链接中添加背景颜色：＆＃39;类别1＆＃39;而不影响其他链接

这是我的CSS

.current_page_parent li:not(.children) a {
    display: block;
    padding: 5px 15px;
    background-color: #d6205c;
}

Answer 1

您可以将first-of-type与> combinator selector

结合使用

:first-of-type CSS伪类代表了第一个兄弟   它在父元素子元素列表中的类型。

>组合子分隔两个选择器并仅匹配那些选择器   第二个选择器匹配的元素是直接子元素   第一个匹配的元素。

li.current_page_parent:first-of-type > a{
    display: block;
    padding: 5px 15px;
    background-color: #d6205c;
}

li.current_page_parent:first-of-type > a {
  display: block;
  padding: 5px 15px;
  background-color: #d6205c;
}

<div id="sideMenu">
  <li class="current_page_parent">
    <a href="#">Category 1</a>
    <ul class="children">
      <li><a href="#">Sub</a>
      </li>
      <li><a href="#">Sub</a>
      </li>
      <li><a href="#">Sub</a>
      </li>
      <li><a href="#">Sub</a>
      </li>
    </ul>
  </li>
  <li></li>
  <li></li>
</div>

Answer 2

您可以将类别属性添加到特定<a>并直接按类名选择特定属性

这里的例子：

HTML：

<div id="sideMenu">
    <li class="current_page_parent">
        <a class="notInULChildren" href="#">Category 1</a>
        <ul class="children">
            <li><a href="#">Sub</a></li>
            <li><a href="#">Sub</a></li>
            <li><a href="#">Sub</a></li>
            <li><a href="#">Sub</a></li>
        </ul>
    </li>
    <li></li>
    <li></li>
</div>

CSS：

.notInULChildren{
    display: block;
    padding: 5px 15px;
    background-color: #d6205c;
}

FIDDLE

李的风格链接

2 个答案: