CSS選擇器詳解一
css中包括：元素選擇器、通用（*）選擇器、類（class）選擇器、id選擇器、屬性選擇器、後代選擇器、子元素選擇器、相鄰兄弟元素選擇器、兄弟元素選擇器等，如下例：
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
div {border:1px solid red;position:relative;padding:5px;margin:5px}/*元素選擇器 ：選擇所有div元素*/
div *{border:1px solid red;position:relative;padding:5px;margin:5px}/*通用選擇器：選擇div的所有子元素 ，儘量少用*/
ul{list-style-position:inside;list-style-type:decimal;}
.ul1{border:1px solid green;}/*類選擇器：選擇class='"ul1"的元素 */
#ul2{border:1px solid blue;}/*id選擇器：選擇id="ul2"的元素 */
.ul1 li{text-decoration:underline;}/*後代元素選擇器：選擇class="ul1"的元素的所有後代li元素*/
.ul1>li{color:red;}/*子元素選擇器：選擇class="ul1"的元素的相鄰後代li元素,ul2中的li不會選擇 */
#ul2+li{border:1px solid blue;}/*相鄰兄弟元素選擇器：選擇id="ul2"的元素之後的相鄰兄弟li元素 */
#ul2~li{color:gray}/*兄弟元素選擇器：選擇id="ul2"的元素之後的所有兄弟li元素 */
p[id]{font-weight:bold;}/*屬性元素選擇器：選擇含有屬性id的所有p元素 */
p[id="p1"]{border:1px solid blue;}/*屬性元素選擇器：選擇屬性id="p1"的元素 */
p[id^="p2"]{color:green}/*屬性id的值以"p2"開頭的元素*/
p[id$="2"]{font-size:30px;}/*屬性id的值以"2"結尾的元素*/
p[id*="p"]{text-decoration:overline;}/*屬性id的值包含"p"字串的元素*/
</style>
</head>
<body>
<div>
This is a div1.
<ul class="ul1">
This is a ul1.
<li id="li1" class="li11">This is li1.</li>
<li id="li2" class="li22">
This is li2.
<p id="p1">This is paragraph p1.</p>
<p >This is paragraph p2.</p>
</li>
<ul id="ul2">
<li id="li3" >This is paragraph li3.</li>
<li id="li4">
This is li4.
<p id="p2">This is paragraph p3.</p>
<p >This is paragraph p4.</p>
</li>
</ul>
<li id="li5">This is li5.</li>
<li id="li6">This is li6.</li>
<li id="li7">This is li7.</li>
</ul>
</div>
</body>
</html>