1、群組選擇器(',')
/* 表示既h1账忘,又h2 */
h1, h2 {
? color: red;
}
2志膀、后代選擇器(空格)
/* 表示 h1 下面的所有 span 元素,不管是否以 h1 為直接父元素 */
h1 span {}
3鳖擒、子元素選擇器('>')
選擇直接子元素
/* 表示 h1 下面的所有以 h1 為直接父元素的 span 元素溉浙,注意必須以 h1 為直接父元素 */
h1 > span {}
示例:下面第一個(gè)h1的兩個(gè)strong元素是紅色,第二個(gè)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蒋荚、相鄰兄弟選擇器('+')
選擇緊接在另一個(gè)元素后的元素戳稽,而且二者有相同的父元素。
<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期升、兄弟選擇器('~')
選擇在某元素之后的所有兄弟元素惊奇,不一定要緊跟在后面,但必須得是相同父元素播赁,即必須是同一級(jí)元素颂郎。
/* A之后的所有B元素,不一定要緊跟在A后面容为、相同父元素 */
A ~ B{}