仅在SCSS内选择一个课程

我希望有人能够帮助我。我使用下面的代码样式应用到嵌套.twitter-类中的所有类：仅在SCSS内选择一个课程

a[class^="twitter-"] { 
     margin-right: 5px; 
     opacity: .8; 

     &:before { 
      margin-right: 5px; 
     } 

     &:hover { 
      opacity: 1; 
     } 
    }

有下叽叽喳喳例如几类：.twitter回复，.twitter，转推，以及。 Twitter的最爱。

我想为5px右边距适用于所有twitter- *类，与.twitter-最爱除外 - 参见下面的例子：

<div class="twitter-reply">Example</div> 
<div class="twitter-retweet">Example</div> 
<div class="twitter-fav">Example</div>

我试图研究它，但无法找到正确的术语。

来源

2015-11-06 CharlyAnderson

请提供一些我们可以使用的示例HTML代码。 –

请提供您正在寻找的CSS输出示例。 – cimmanon

我实际上设法利用最后的孩子，而不是按照下面的例子来解决这个问题：

a[class^="twitter-"] { 
     margin-right: 5px; 

     &:before { 
      margin-right: 5px; 
     } 

     &:hover { 
      opacity: 1; 
     } 

     &:last-child{ 
      margin-right: 0; 
     } 
    }

来源

2015-11-06 15:51:06 CharlyAnderson

-1

从我理解的你想要巢多个类，对吧？因此，类.twitter-fav里面的元素您的.twitter-*类应该会收到额外的样式部分，对吧？

如果是这样的：

a[class^="twitter-"] { 
    .twitter-fav { 
    // Your styling 
    } 
    margin-right: 5px; 
    opacity: .8; 
}

这将影响到所有的元素，像这样：

<div class="twitter-whatever"> 
    <div class="twitter-fav"> 
    </div> 
</div>

享受。

来源

2015-11-06 11:43:15

这听起来不像这里所说的那样。这听起来像OP想要以一种方式利用嵌套，使它们具有'a'class =“twitter - ”]和'a.twitter-fav'的样式。 – cimmanon

最有效的方法，这样做将采取的:not()优势。

a[class^="twitter-"] { 
    // your other styles 

    &:not(.twitter-fav) { 
    margin-right: 5px; 
    } 
}

这将适用于margin-right: 5px;除了-fav所有Twitter的链接。

来源

2015-11-07 03:59:48 graygilmore

如果你想要把元素之间的一些边缘具.twitter-类，但你不知道哪一个是最后一个元素，你可以尝试使用这样的：右后

[class^=twitter-"] { 
    & + a[class^=twitter-"] { 
     margin-left: 5px; 
    } 
}

的加号选择元素前面的选择器

来源

2015-11-13 16:03:35 Iecya

仅在SCSS内选择一个课程

回答

相关问题