CSSセレクタの種類と使い分け — 要素を正確に指定する

/* すべての h2 に適用 */
h2 {
  font-size: 1.5rem;
}
 
/* すべての p に適用 */
p {
  line-height: 1.8;
}

<p class="lead">リード文です。</p>
<p>通常の段落です。</p>

.lead {
  font-size: 1.25rem;
  color: #555;
}

<button class="btn btn-primary">送信</button>
<button class="btn btn-secondary">キャンセル</button>

.btn {
  padding: 0.5rem 1rem;
  border-radius: 4px;
  border: none;
  cursor: pointer;
}
 
.btn-primary {
  background-color: #2563eb;
  color: white;
}
 
.btn-secondary {
  background-color: #e5e7eb;
  color: #111;
}

<header id="site-header">...</header>

#site-header {
  height: 60px;
  background: #fff;
}

/* type="text" の input に適用 */
input[type="text"] {
  border: 1px solid #ccc;
}
 
/* href が https で始まるリンク */
a[href^="https"] {
  color: #16a34a;
}
 
/* .pdf で終わるリンク */
a[href$=".pdf"]::after {
  content: " (PDF)";
}

/* マウスオーバー時 */
a:hover {
  text-decoration: underline;
}
 
/* フォーカス時（キーボード操作・クリック） */
input:focus {
  outline: 2px solid #2563eb;
}
 
/* リンク：未訪問・訪問済み */
a:link    { color: #2563eb; }
a:visited { color: #7c3aed; }
 
/* 最初の子要素 */
li:first-child { font-weight: bold; }
 
/* 奇数番目の行 */
tr:nth-child(odd) { background: #f9fafb; }

/* 最初の1文字 */
p::first-letter {
  font-size: 2em;
  float: left;
}
 
/* 要素の前後にコンテンツを挿入 */
.required::after {
  content: " *";
  color: red;
}

/* 子孫セレクタ：nav の中のすべての a */
nav a {
  text-decoration: none;
}
 
/* 子セレクタ：直接の子要素のみ */
ul > li {
  list-style: none;
}
 
/* 隣接セレクタ：直後の兄弟要素 */
h2 + p {
  margin-top: 0;
}
 
/* 一般兄弟セレクタ：後続のすべての兄弟 */
h2 ~ p {
  color: #555;
}

<div class="contaner">...</div> <!-- typo: contaner -->

.container { ... } /* 当たらない */

.card p { color: red; }   /* 詳細度: (0,1,1) */
p { color: blue; }         /* 詳細度: (0,0,1) */