css中“>”是:
css3特有的選擇器，A .B 表示選擇A元素的所有子B元素。
與A B的區別在於，A B選擇所有後代元素，而A>B只選擇一代。
.a，.b｛逗號指相同的css樣式｝；.a .b｛空格指後代元素｝；.a>.b｛大於號指子代元素｝
css中“+”是:
A+B{}這個+是選擇相鄰兄弟，稱作“相鄰兄弟選擇器”
A+B表示HTML中緊隨A的B元素(必須緊跟A後面，A前面無效)：用一個結合符只能選擇兩個相鄰兄弟中的第二個元素，而且二者有相同的父元素，可以使用相鄰兄弟選擇器，例如，如果要增加緊接在 h1 元素後出現的段落的上邊距，可以這樣寫：
h1 + p {margin-top:50px;}
這個選擇器讀作：“選擇緊接在 h1 元素後出現的段落，h1 和 p 元素擁有共同的父元素”
css中“~”是:
爲所有相同的父元素中位於 p 元素之後的所有 ul 元素設置背景：
p~ul{
background:#333;
}
<p>快樂生活</p>
<ul>
<li>生活</li>
<li>生活</li>
<li>生活</li>
</ul>
p~ul 選擇前面有 <p> 元素的每個 <ul> 元素。
定義和用法
p~ul選擇器 p之後出現的所有ul。
兩種元素必須擁有相同的父元素，但是 ul不必直接緊隨 p。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>css屬性選擇器</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no">
<style>
p{
height: 30px;
border: 1px solid #000;
}
p[miao|=e]{background: pink};
/*自定義屬性 <p miao="bbb xc">b</p> 、input[type=submit]*/
/* E[attr]只使用屬性名，但沒有任何屬性值(自定義屬性)
p[miao]{background: red};
E[attr="value"]指定屬性名，並指定了該屬性的屬性值
p[miao=bbb]{background: red};推薦
E[attr~="value"]指定屬性名,E和attr相同(標籤和屬性一樣的元素、無論包含與否上下級關係)、
並且元素屬性值包含value的，~一定要加 例：input:checked ~.content 下面的div class="content"裏的所有內容
p[miao~=old]{background: red}; 推薦
E[attr^="value"]指定了屬性名，並且有屬性值，屬性值以value開頭的(第一個開頭字母)
p[miao^=a]{background: pink};
E[attr$="value"]指定屬性名，並且有屬性值，以value結束的(值的最後一個字母)
p[miao$=h]{background: pink};
E[attr*="value"]指定屬性名，並且有屬性值,而且屬性值包含了value
p[miao*=c]{background: pink};下面值中只要包含了c字母的都是粉色 推薦
E[attr|="value"]指定了屬性名，並且屬性值是value或者以"value-"開頭的值
p[miao|=e]{background: pink};指定的是值爲 e帶-的所有
input:checked+span {/*等於checked~span E~F表示E毗鄰下、
後面的所有F元素 加號表示input下面一個兄弟節點
background: red;}
*/
</style>
</head>
<body>
<p miao="aaa old">a</p>
<p miao="bbbc">b</p>
<p miao="ccc">c</p>
<p miao="d-ddh">d</p>
<p miao="e-xm">e</p>
<label>
<input type="radio" name="tab"/>
<span></span>
</label>
</body>
</html>