网页设计：为什么 ：之前 scss 工作嵌套在 li 中，除非我把它分开？

Question

好的我有一个rtl网站。存在一个ul和许多li。每个li中的第一个单词是ltra链接。我想做的很简单。我想在每个li之前都有一个正面的真棒图标，所以我做了正常的代码

html

<ul class="vocab">
<li>CPU(central processing unit).: وحدة المعالجة المركزية</li>
<li><a href="" class="ltr">CPU(central processing unit).</a>: وحدة المعالجة المركزية</li>
<li><a href="">CPU(central processing unit)</a>: وحدة المعالجة المركزية</li>
<li><a href="">CPU(central processing unit)</a>: وحدة المعالجة المركزية</li>
<li><a href="">CPU(central processing unit)</a>: وحدة المعالجة المركزية</li>
<li><span class="ltr">left ...</span></li>
</ul>

这是scss

body {
margin: 0;
padding: 0;
background-color: #ffffff;
direction: rtl;
}
.ltr {
direction: ltr;
display: inline-block;
}
.vocab{
list-style: none;
width: 70%;
border-right: 3px solid rgba(77, 181, 56, 1);
background-color: rgba(77, 181, 56, .1);
padding: $p;
margin: 0 auto;
padding-right: 2 * $h1;
li {
padding-right: $h1;
:before{
content: "f137";
font-family: FontAwesome;
display: inline-block;
margin-right: -$h1;
width: $h1;
}
}
}

发生了四个问题。。

1. 我制作了一些只有文本(没有链接)的li。那些没有链接的在它们之前没有图标(除非我把它们放在一个跨度中)
2. 出于某种原因，如果li一开始就有a链接，图标就会变成链接
3. 作为对我的算法的另一个测试，在rtl之间有一个ltr文本。我没上这堂课就做了一些。那些没有ltr级别的人在位置上表现得很好。然而，有这个类的那个在文本之间有它的图标(我想这是由于我放置图标的方式)。4.最后一件事是直接写入li的文本没有图标

这里是输出：无解决方案输出

我的解决方案有点奇怪。这正是我需要解释的，它是如何工作的

我做了什么。。我在scs上做了一个改变。。我做了：以前进李：以前没有嵌套

.vocab{
list-style: none;
width: 70%;
border-right: 3px solid rgba(77, 181, 56, 1);
background-color: rgba(77, 181, 56, .1);
padding: $p;
margin: 0 auto;
padding-right: 2 * $h1;
li {
padding-right: $h1;
}
li:before{
content: "f137";
font-family: FontAwesome;
display: inline-block;
margin-right: -$h1;
width: $h1;
}
}

输出求解

总结。。当我制作：before嵌套在嵌套在.vocab中的li中……它不起作用，实际上放弃了一些奇怪的输出但是，当我制作li：嵌套在里面之前。vocab(不是：嵌套在li之前)它起作用了为什么？这不是基本上一样吗

Answer 1

SCSS:

li {
:before {
foo: bar
}
}

表示CSS:

li :before { foo: bar }

空间是子组合子。

您正试图获得：

li:before { foo: bar }

即"在李之前"而不是"在李的每个后代之前"。

您可以使用"与"号来压制派生组合子：

li {
&:before {
foo: bar
}
}

Answer 2

正如Qunetin所指出的，正确的语法是

.li {
&::before {
//stuff
}
}

但也要记住，伪元素的正确语法是双冒号(：before)。单个冒号(：hover)用于伪类