1、群組選擇器（','）

/* 表示既h1，又h2 */ h1, h2 {color: red; }

2、后代選擇器（空格）

/* 表示 h1 下面的所有 span 元素，不管是否以 h1 為直接父元素 */ h1 span {}

3、子元素選擇器（'>'）

選擇作為某元素子元素的元素

/* 表示 h1 下面的所有以 h1 為直接父元素的 span 元素，注意必須以 h1 為直接父元素 */ h1 > span {}

示例：下面第一個h1的兩個strong元素是紅色，第二個h1的strong元素將不變色

<h1>This is <strong>very</strong> <strong>very</strong> important.</h1> <h1>This is <em>really <strong>very</strong></em> important.</h1> h1 > strong {color:red;}

?

4、相鄰兄弟選擇器（'+'）

選擇緊接在另一個元素后的元素，而且二者有相同的父元素。

<ul><li>List item 1</li><li>List item 2</li><li>List item 3</li></ul><ol><li>List item 1</li><li>List item 2</li><li>List item 3</li></ol>

?

?5、兄弟選擇器（'~'）

選擇某元素之后的所有元素，不一定要緊跟在后面，但必須得是相同父元素，即必須是同一級元素。

/* A之后的所有B元素，不一定要緊跟在A后面、相同父元素 */ A ~ B{}

?

轉載于:https://www.cnblogs.com/wenxuehai/p/11449430.html

總結

以上是生活随笔為你收集整理的CSS中的 ',' 、''、'+'、'~'的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。