组合选择器：
- <选择器> / 含义
- <E,F >： 多元素选择器，用,分隔，同时匹配元素E或元素F。
- <E F >： 后代选择器，用空格分隔，匹配E元素所有的后代（不只是子元素、子元素向下递归）元素F。
- <E>F > ： 子元素选择器，用>分隔，匹配E元素的所有直接子元素。
- <E+F >： 直接相邻选择器，匹配E元素之后的相邻的同级元素F。
- <E~F >： 普通相邻选择器（弟弟选择器），匹配E元素之后的同级元素F（无论直接相邻与否）。
- <.class1.class2>： id和class选择器和选择器连写的时候中间没有分隔符，. 和 # 本身充当分隔符的元素。
- <element#id>： id和class选择器和选择器连写的时候中间没有分隔符，. 和 # 本身充当分隔符的元素。
html：
、、、
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>JS Bin</title>
<head>
<body>
<h1>标题</h1
<p>段落</p>
<div id="ct">
<p class="p1">ct-p1</p>
<p class="p3">ct-p2
<span class="p2">span-p2</span>
</p>
<p>p4</p>
</div>
<h2 class="p2">p2</h2>
</body>
</html>
、、、
css:
、、、
*{
border:1px solid red;
}
#ct {
font-size:30px;
}
.p2{
color:bule;
}
p{
font-size: 12px;
}
.p1,p2{
color:red;
}
ct>.p3{
color:blue;
}
.p1+p{
color:red;
}
.p1~p{
color:red;
}
h2.p2{
color:red;
}
、、、
jsbin展示结果
注：jsbin中所有/---/是为取消css之前选择器编写内容作用的，如果需要，可以直接按“ctrl+/”取消。
