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{}