特定のリスト要素にCSSスタイルを追加

トップ&ボトムborderを次のメニューの最初の要素に追加しようとしましたが、スタイルはサブレベルのアイテムにも追加されますa、アーカイブしたくないもの。特定のリスト要素にCSSスタイルを追加

次のように私は、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>

出典

2017-08-20 Daniel

クラスを追加して問題を解決してみませんか –

答えはThxです。メニューはショップシステムのphpで完全に設定されているため、これらのファイルの中で何かを変更したくありません。 – Daniel

使用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>

出典

2017-08-20 15:30:31 kukkuz

ありがとう、うまくいった:) – Daniel

特定のリスト要素にCSSスタイルを追加

答えて

関連する問題