Question

我正在开发一款应用，但在覆盖background-position属性时遇到一些问题。在应用中，我向font-size-big元素添加了一个类html以增加字体大小。这样做，我的自定义下划线图像的位置变低。下划线现在浮动在链接文本上。

我想要实现的是，每个字体大小类（font-size-big，font-size-small，font-size-medium）具有不同的background-position s。似乎我无法根据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;
  }
}

感谢您的时间。我真的坚持这个。

Answer 1

我认为您不应该覆盖基本样式，因为字体大小是chaning。如果用户强制使用更大的文本大小，您会怎么做？你的布局将被打破。而不是给下划线图像一个固定的位置，你应该以百分比给出它。

background-position: 0% 100%;

将图像设置为元素的底部。如果您总想添加23px（您忘记定义单位），您可以尝试这样的事情：

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

如何使用父.class属性覆盖子元素属性

1 个答案: