如何用父级.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属性覆盖子元素属性

回答

相关问题