css - 使用 :not 从样式中排除 child

Question

我尝试使用此 HTML 标记为部分内容应用样式:

<li class="views-row views-row-9 views-row-odd tid-106
">  
<span><a href="/fiche/bac-pro-csr">BAC Pro Commercialisation et services en restauration - CSR</a>
<br><span class="complement">
 Bac Pro CSR avec Restaurant d'application (Section Européenne)
  </span><br> 
Section Européenne 
</span>
  </li>

我只想设置“Section Européenne”文本的样式，并从 span.complement 中排除内容，所以我尝试了这个在 sass 中不起作用的方法:

 li{
                  &:not(img):not(a):not(.complement){
                        font-weight: bold;
                        /*-webkit-text-stroke:em(1px) $gris-anthracite;//Contour de texte*/
                    }
                    &:matches(.complement){
                        font-weight: initial;
                    }}

这有可能吗？是否可以通过 :not 排除 span 的 span child？

是这样的吗？

              &:not(img):not(a):not(>span.complement){}

谢谢

Answer 1

你需要做这样的事情，因为跨度在另一个跨度内:

li span {
  font-weight:bold;
}
li span.complement {
  font-weight:initial; /*we revert back the inherited style*/
}

<li class="views-row views-row-9 views-row-odd tid-106">
  <span><a href="/fiche/bac-pro-csr">BAC Pro Commercialisation et services en restauration - CSR</a>
<br>
<span class="complement">
 Bac Pro CSR avec Restaurant d'application (Section Européenne)
 </span>
 <br> Section Européenne
  </span>
</li>