1. ホーム
  2. css

[解決済み] CSSスタイルシートはどのような順序で上書きされるのですか?

2022-04-23 17:04:59

質問

HTMLのヘッダーに、こんなのがあります。

<head>
<title>Title</title>
<link href="styles.css" rel="stylesheet" type="text/css"/>
<link href="master.css" rel="stylesheet" type="text/css"/>

styles.css は私のページ専用シートです。 master.css は、ブラウザのデフォルトを上書きするために、私が各プロジェクトで使用しているシートです。これらのスタイルシートのうち、どれが優先されるのでしょうか? 例:最初のシートには、特定の

body { margin:10px; }

そして関連するボーダーですが、2番目には私のリセットを含んでいます。

html, body:not(input="button") {
    margin: 0px;
    padding: 0px;
    border: 0px;
}

要するに、CSSのcascading要素は、スタイルシートの参照という点では、一般的なCSSの関数と同じ働きをするのでしょうか?最後の行が表示されるという意味ですか?

どのように解決するのですか?

CSSルールのカスケードに関するルールは複雑なので、下手に言い換えようとせず、単純に仕様書を参照してください。

http://www.w3.org/TR/2011/REC-CSS2-20110607/cascade.html#cascade

要するに、より具体的なルールがより一般的なルールより優先されるということです。特異性は、ID、クラス、要素名がいくつ含まれるか、そして !important 宣言が使用されている。同じレベルのルールが複数存在する場合、最後に表示されたものが優先されます。