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不是 main 的直接后代，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 回答