スタイルを指定するときの詳細度について
詳細度とは、どの CSS プロパティが要素に最も関係があるか、すなわち適用されるかをブラウザーが決定する手段です。
https://developer.mozilla.org/ja/docs/Web/CSS/Specificity
基本的に詳細度は以下のような優先度があります
- 親要素 ＜ 子要素
- 属性
class＜ 属性id
例えば、親要素の属性classにスタイルを指定して、子要素の属性classにもスタイルを指定すると、子要素の属性classのスタイルが適用されます。
スタイルシートに同じセレクタを定義してしまうと、後に定義されたセレクタが適用されます
実際にスタイルをあてて確認してみましょう
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="parent">
<span id="first" class="cls">おはよう！ こんにちは！ １</span>
<span>おはよう！ こんにちは！ ２</span>
<span>おはよう！ こんにちは！ ３</span>
<span>おはよう！ こんにちは！ ４</span>
</div>
</body>
</html>
style.css
.parent {
color: blue;
font-weight: 600;
}
span {
color: purple;
}
.cls {
color: orange;
}
#first {
color: magenta;
}
.parent span {
color: red;
}
.parent span {
color: black;
}