Разный переход к телу и содержанию

Question

Я осмотрелся, но не смог найти решение для этого.

Как я могу переопределить #wait, #about и a переходы с помощью body? Я хочу, чтобы размер шрифта изменялся быстрее.

Спасибо.

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; 
 
}

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

Answer 1

Вы можете использовать! Важно.

-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 или более разделенных запятыми переходов, с помощью одного перехода собственности:

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

 
#wait:hover { 
 
    font-size: 10vw; 
 
    color: red; 
 
}

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