Quantcast
Channel: CSSタグが付けられた新着記事 - Qiita
Viewing all articles
Browse latest Browse all 8536

CSSアニメーションと!importantの優先順位について

$
0
0

!importantが優先される

CSSアニメーションと!importantとでルールが衝突した場合、!importantが優先されます。

The origin of a declaration is based on where it comes from and its importance is whether or not it is declared !important (see below). The precedence of the various origins is, in descending order:
 

  1. Transition declarations [css-transitions-1]
  2. Important user agent declarations
  3. Important user declarations
  4. Important author declarations
  5. Animation declarations [css-animations-1]
  6. Normal author declarations
  7. Normal user declarations
  8. Normal user agent declarations

Declarations from origins earlier in this list win over declarations from later origins.
Origin and Importance | CSS Cascading and Inheritance Level 3

Chromeにはバグがある

優先順位について、Chromeにバグがあるようです。
https://jsfiddle.net/Lhankor_Mhy/xdgsp2ey/

<p>
test
</p><p>
test(!important規則があってもアニメーションする)
</p>
p{animation:test1.2seaseforwards2s;}@keyframestest{0%{color:#f00}100%{color:#000}}p{color:#00f;}p+p{color:#00f!important;}

Viewing all articles
Browse latest Browse all 8536

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>