0

私はこのマークアップを持っています:

<ul> // w style: border-top: 2px solid #aaa; border-bottom: 1px solid #ccc;
  <li>
    <ul> // w style: border-bottom: 2px solid #aaa;
      <li>
      <li>
    </ul>
  </li>
</ul>

上記のように、メインの親にいくつかのスタイルを追加し、内部の同じアイテムに継承されるスタイルのタッチを追加する必要があります。だから私はこれをしますが、うまくいきません...

ul {
   border-top: 2px solid #aaa;

   & > {
     border-bottom: 1px solid #ccc;
   }
}

タグを複製して内部で別のスタイルを指定できることは知っていますが、一般的にそのような記録/書き込みの可能性はありますか? 助けてくれてありがとう。

4

1 に答える 1

1

ネストされたセレクターの使用が間違っていると思います.Sassからエラーがスローされているに違いありません. >この場合、包含セレクターのエイリアスの後に直接子孫セレクターを使用したulため、コンパイルされたセレクターはul >どちらが無効であるかのように見えます。

セレクターはパターンに従う必要がありますparent > child。あなたは試みているかもしれませんul > ulが、ネストされたものulはメインの直接の子孫ではulなく、の子ですli。

修正されたコード:

ul {
   border-top: 2px solid #aaa;

   & > li > & {
     border-bottom: 1px solid #ccc;
   }
}

ただし、このルールは次の状況にも適用されることに注意してください。そのため、ネストされたul.

HTML

<ul> // w style: border-top: 2px solid #aaa; border-bottom: 1px solid #ccc;
  <li>
    <ul> // w style: border-bottom: 2px solid #aaa;
      <li>
        <ul> // Another list
          <li></li>
          <li></li>
        </ul>
      <li>
    </ul>
  </li>
</ul>

だったらこっちの方がいいよ

<ul> // w style: border-top: 2px solid #aaa; border-bottom: 1px solid #ccc;
  <li>
    <ul class='sub-list'> // w style: border-bottom: 2px solid #aaa;
      <li>
      <li>
    </ul>
  </li>
</ul>

次の css/scss で

ul {
  border-top: 2px solid #aaa;
}

.sub-list { /* Will inherit the above if used on a ul */
   border-bottom: 1px solid #ccc;
}
于 2013-08-29T11:51:36.133 に答える