Skip to content

Instantly share code, notes, and snippets.

@rosylilly

rosylilly/css-specificity.html

Created August 10, 2012 06:25
Show Gist options
  • Save rosylilly/3311736 to your computer and use it in GitHub Desktop.
Save rosylilly/3311736 to your computer and use it in GitHub Desktop.
Download ZIP
CSS の優先順位付けについて
Raw
css-specificity.html
<!DOCTYPE html>
<html>
<head>
<style>
p.a.b.c.d.e.f.g.h.i.j.k {
color: red;
}
p#a {
color: blue;
}
</style>
</head>
<body>
<p class="a b c d e f g h i j k" id="a">specify</p><!-- 青色で表示される -->
<!--
CSS の specificity は * 10 とかで説明すると誤りが起こる。
正しくは
A = style
B = id
C = class
D = Element
で (1000A + 100B + 10C + D) は間違いで
A.B.C.D でソフトウェアのバージョン表記の上下のように捉えるのが正しい。
ということだったはず。
-->
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment