Question

我环顾四周，但无法找到解决方案。

如何使用#wait覆盖#about，a和body转换？我希望字体大小能够更快地调整大小。

感谢。

＆＃13;

body {
  font-family: Arial;
  font-size: 10vw
}
body {
  -webkit-transition: font .2s ease;
  -moz-transition: font .2s ease;
  -o-transition: font .2s ease;
  transition: font .2s ease;
}
#wait,
#about,
a {
  -webkit-transition: all .6s ease;
  -moz-transition: all .6s ease;
  -o-transition: all .6s ease;
  transition: all .6s ease;
}

＆＃13;

<div id="wait">
  <div id="about">
    1 2 3 4 <a href="#">5</a> 6 7 8 9 0
  </div>
</div>

＆＃13;

Answer 1

您可以使用！important。

    -webkit-transition: all .2s ease !important;

如果将它放在身体上，那么它将覆盖其他样式。

Answer 2

#wait,
#about,
a {
  -webkit-transition: all .2s ease !important;
  -moz-transition: all .2s ease !important;
  -o-transition: all .2s ease !important;
  transition: all .2s ease !important;
}

每当你想覆盖一个css并且样式不适用时使用！在样式代码的末尾是重要的

Answer 3

您可以使用单个过渡属性指定2个或多个以逗号分隔的过渡：

＆＃13;

#wait {
  font-size: 5vw;
  transition: all 2s ease, font .2s ease;
}

#wait:hover {
  font-size: 10vw;
  color: red;
}

＆＃13;

<p id="wait">
  TEEEST
</p>

＆＃13;

不同的过渡到身体和内容

3 个答案: