CSS 註解 (Comments)

註解是用來在程式碼中加入說明文字，瀏覽器會忽略註解的內容，不會影響樣式的呈現。註解可以幫助你和其他開發者理解程式碼的用途。

註解語法

CSS 使用 /* */ 來標記註解：

/* 這是一個單行註解 */
h1 {
  color: blue;
}

/*
  這是一個
  多行註解
*/
p {
  font-size: 16px;
}

註解的用途

說明程式碼

/* 主要標題樣式 */
h1 {
  font-size: 32px;
  font-weight: bold;
}

/* 導航列連結 - 移除預設底線 */
nav a {
  text-decoration: none;
}

分隔程式碼區塊

/* =================================
   Header 區塊
   ================================= */
.header {
  background-color: #333;
}

/* =================================
   Main Content 區塊
   ================================= */
.main {
  padding: 20px;
}

/* =================================
   Footer 區塊
   ================================= */
.footer {
  background-color: #222;
}

暫時停用樣式

在除錯時，可以用註解暫時停用某些樣式：

.box {
  background-color: white;
  /* border: 1px solid red; */  /* 暫時停用這行來測試 */
  padding: 10px;
}

TODO 和 FIXME

標記待辦事項或需要修復的問題：

/* TODO: 之後要加上響應式設計 */
.container {
  width: 1200px;
}

/* FIXME: IE11 顯示有問題 */
.flex-box {
  display: flex;
}

注意事項

CSS 不支援單行註解語法 //，這是 JavaScript 和其他程式語言的語法：

/* 正確 */
/* 這是註解 */

/* 錯誤 - 這不是有效的 CSS 註解 */
// 這不是註解

註解不能巢狀使用：

/* 這是外層註解
   /* 這是內層註解 - 會造成錯誤 */
*/