建立 2025-02-25 更新 2026-09-11

CSS 基本語法與選擇器（Syntax & Selectors）

CSS 規則告訴瀏覽器：選誰、改什麼、改成多少。選錯人，後面寫再漂亮也不會作用在你以為的元素上。

基本語法

選擇器 {
  屬性: 值;
}

p {
  color: #c62828;
  font-size: 16px;
}

註解

CSS 註解只有 /* ... */，沒有 //。註解不會影響樣式，適合標註暫時關掉的規則。

HTMLCSS

<h1 class="title">這是標題</h1>
<p id="intro">這是導言</p>

.title { color: #264de4; }
#intro { background: #fff8e1; }

class 與 id

視覺樣式請優先用 class。id 優先權很高，之後很難覆蓋，也常留給 JavaScript 或頁內錨點。

<div class="card">
  <p>直接子元素</p>
  <div>
    <p>更裡面的段落</p>
  </div>
</div>
<h1>標題</h1>
<p>標題後第一段</p>
<p>標題後第二段</p>

.card > p { font-weight: 700; }   /* 只影響第一個 p */
h1 + p { font-size: 1.125rem; } /* 導言放大 */
h1 ~ p { color: #444; }

input[type="email"] { border-color: #264de4; }
a[href$=".pdf"]::after { content: " (PDF)"; }

完整說明見偽類及偽元素。這裡只要會選狀態與結構：

a:hover { color: #d32f2f; }
li:nth-child(odd) { background: #f5f5f5; }
.badge::before { content: "★ "; }

article:has(img) {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 1rem;
}

:where(.prose) :is(h1, h2, h3) {
  line-height: 1.3;
}

CSS 巢狀（Nesting）

現代瀏覽器已支援在規則裡再寫規則，減少重複選擇器：

.card {
  padding: 1rem;
  &:hover { box-shadow: 0 8px 24px rgb(0 0 0 / 12%); }
  h2 { margin-top: 0; }
}

選擇器越精準越好，但不要為了「只選這一個」就堆一長串。優先權細節請接層疊與優先權。