CSS 組合技(combinator)

相鄰兄弟 Adjacent sibling

/* 圖片後面緊跟著的段落被選車 */
img + p {
  font-weight: bold;
  color: green;
}

/*  選擇屬於“my-things”類的無序列表（ul）的直接子列表元素（li） */
ul.my-things > li {
  margin: 2em;
}

太潮了，先不寫

/* List items that are descendants of the "my-things" list */
/* 在 my-things 的 class 中，只要有 li 的便會被選中 */
ul.my-things li {
  margin: 2em;
}

/* 是 ul 的 tag 而且有 apple 的 class name */ 
ul.apple {
	font-size: 40px;
}

/* 在任意 apple class 後的兄弟段落 */
.apple ~ li  {
    color: red;
}

當多個選擇器共享相同的聲明時，它們可以被編組進一個以逗號分隔的列表。選擇器列表也可以作為參數傳遞給一些函數式 CSS 偽類。逗號之前和/或之後可以有空白（字符）。

span {
  border: red 2px solid;
}
div {
  border: red 2px solid;
}

span,
div {
  border: red 2px solid;
}

:is(span, div) {
  border: red 2px solid;
}