如何用父級.class屬性覆蓋子元素屬性

我正在開發一個應用程序，並且在覆蓋background-position屬性時遇到了一些問題。在應用程序中，我將font-size-big類添加到html元素以增加字體大小。這樣做，我的自定義下劃線圖像的位置變得很低。下劃線現在浮在鏈接文本上。如何用父級.class屬性覆蓋子元素屬性

我想達到的目標是爲每個字體大小的類（font-size-big，font-size-small，font-size-medium）設置不同的background-position。看來我不能選擇a元素，這取決於html元素類。

HTML：

<html class="font-size-big"> 
    <head></head> 
    <body class="article"> 
    <section class="links">From <a href="http://foo.bar">Steven</section> 
    </body> 
</html>

SCSS：

.font-size-big { 
    font-size: ($basic-fontsize * 1.2) + rem;; 
} 

.links { 
    color:$grey; 
    font: { 
    family:$fontTextItalic; 
    size: $basic-fontsize; 
    } 

    a { 
    color:$grey; 
    text-decoration: none; 
    background: url(/assets/images/article/dottedLinkUnderline_grey.png) repeat-x 0 23; 
    } 
}

謝謝您的時間。我真的被困在這一個。

來源

2014-01-29 stekhn

我不認爲你應該重寫基本風格，只是因爲字體大小是chaning。如果用戶強制更大的文本大小，你會怎麼做？你的佈局將被打破。不要給下劃線圖像一個固定的位置，你應該用百分比給出它。

background-position: 0% 100%;

將圖像設置到元素的底部。如果你總是想添加23px（你忘了定義單位），你可以嘗試這樣的事情：

.links a 
{ 
    background-position:0 calc(100% + 23px); 
}

來源

2014-01-29 11:44:59

非常感謝你，這個技巧。我使用了'background-position：0 1rem'，這同樣適用。 – stekhn

如何用父級.class屬性覆蓋子元素屬性

回答

相關問題