僅在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內選擇一個課程

回答

相關問題