将css样式添加到特定列表元素

Question

尝试将顶部和底部border添加到以下菜单的第一个元素，但样式也添加到a的子级别项目，我不想存档。

我用CSS如下：

ul.menu--level-0 li.item--level-0 a {}

有人可以帮帮我吗？

<ul class="menu--list menu--level-0 columns--4" style="width: 100%;">
  <li class="menu--list-item item--level-0" style="width: 100%">
    <a href="/boden/sockelleisten/" class="menu--list-item-link" title="Sockelleisten">Sockelleisten</a>
    <ul class="menu--list menu--level-1 columns--4">
      <li class="menu--list-item item--level-1">
        <a href="/boden/sockelleisten/weisse-sockelleisten/" class="menu--list-item-link" title="Weisse Sockelleisten">Weisse Sockelleisten</a>
      </li>
      <li class="menu--list-item item--level-1">
        <a href="/boden/sockelleisten/altberliner-hamburger-profil/" class="menu--list-item-link" title="Altberliner / Hamburger Profil">Altberliner / Hamburger Profil</a>
      </li>
      <li class="menu--list-item item--level-1">
        <a href="/boden/sockelleisten/echtholz-furnierte-sockelleisten/" class="menu--list-item-link" title="Echtholz Furnierte Sockelleisten">Echtholz Furnierte Sockelleisten</a>
      </li>
      <li class="menu--list-item item--level-1">
        <a href="/boden/sockelleisten/massivholzleisten/" class="menu--list-item-link" title="Massivholzleisten">Massivholzleisten</a>
      </li>
      <li class="menu--list-item item--level-1">
        <a href="/boden/sockelleisten/mdf-sockelleisten/" class="menu--list-item-link" title="MDF Sockelleisten">MDF Sockelleisten</a>
      </li>
      <li class="menu--list-item item--level-1">
        <a href="/boden/sockelleisten/rohrverkleidung-kabelkanaele/" class="menu--list-item-link" title="Rohrverkleidung / Kabelkanäle">Rohrverkleidung / Kabelkanäle</a>
      </li>
    </ul>
  </li>

Answer 1

像这样使用immediate child selector：

ul.menu--level-0 > li.item--level-0 a > {}

见下面的演示：

ul.menu--level-0 > li.item--level-0 > a {
  border-style: solid;
  border-width: 1px 0;
  border-color: red;
}

<ul class="menu--list menu--level-0 columns--4" style="width: 100%;">
  <li class="menu--list-item item--level-0" style="width: 100%">
    <a href="/boden/sockelleisten/" class="menu--list-item-link" title="Sockelleisten">Sockelleisten</a>
    <ul class="menu--list menu--level-1 columns--4">
      <li class="menu--list-item item--level-1">
        <a href="/boden/sockelleisten/weisse-sockelleisten/" class="menu--list-item-link" title="Weisse Sockelleisten">Weisse Sockelleisten</a>
      </li>
      <li class="menu--list-item item--level-1">
        <a href="/boden/sockelleisten/altberliner-hamburger-profil/" class="menu--list-item-link" title="Altberliner / Hamburger Profil">Altberliner / Hamburger Profil</a>
      </li>
      <li class="menu--list-item item--level-1">
        <a href="/boden/sockelleisten/echtholz-furnierte-sockelleisten/" class="menu--list-item-link" title="Echtholz Furnierte Sockelleisten">Echtholz Furnierte Sockelleisten</a>
      </li>
      <li class="menu--list-item item--level-1">
        <a href="/boden/sockelleisten/massivholzleisten/" class="menu--list-item-link" title="Massivholzleisten">Massivholzleisten</a>
      </li>
      <li class="menu--list-item item--level-1">
        <a href="/boden/sockelleisten/mdf-sockelleisten/" class="menu--list-item-link" title="MDF Sockelleisten">MDF Sockelleisten</a>
      </li>
      <li class="menu--list-item item--level-1">
        <a href="/boden/sockelleisten/rohrverkleidung-kabelkanaele/" class="menu--list-item-link" title="Rohrverkleidung / Kabelkanäle">Rohrverkleidung / Kabelkanäle</a>
      </li>
    </ul>
  </li>