一、部分常用css選擇器

1、子元素選擇器：>

作用：只選取直接子元素。

優點：使html元素層次很清晰的呈現。

2、相鄰兄弟元素選擇器：+

作用：選取相鄰兄弟元素中的第二個。適用於兄弟元素(可以是不同元素)第一個與後面的(某個或所有)樣式不一樣的場合。

例：

<div>

<a>背景1</a>

<span>背景2</span>

</div>

擇若為div內部兩個標籤設定不同背景，css可為：

div a { background：url（）；}

div > a+ span{ background：url（）；}

3、屬性選擇器：[attribute]、[attribute=value]

(1)、[attribute]：選取具有某個屬性的元素，元素範圍可在中括號前新增，但不能有空格，如a[title]：選取具有title屬性的a標籤。

(2)、[attribute=value]：選取某個屬性值為value的標籤（value沒有引號）。同樣可有元素範圍限制。

二、jQuery遍歷元素常用方法（參考w3cshool）

1、祖先元素

(1)、parent()：被選元素直接父元素。

(2)、parents()：被選元素的所有父元素。可加元素範圍，如：parents("ul")，選取父類元素中的所有ul元素。

(3)、parentsUntil("x")：返回所有介於被選元素與x元素之間(不包含)的所有元素。

2、後代元素

(1)、children()：返回被選元素的所有直接子元素,同樣可加元素範圍，如children("p .red")。

(2)、find("x")：返回被選元素的所有後代元素中的x元素，範圍x必填，可為*。與children()不同之處，children()只找直接子元素。

3、同胞元素

(1)、prev()：前一個同胞元素。

(2)、prevAll()：前面所有同胞元素。

(3)、next()：緊跟的後一個同胞元素。

(4)、nextAll()：後面所有同胞元素。

(5)、siblings()：返回被選元素的所有同胞元素。

4、過濾

(1)、eq()；

(2)、filter(過濾條件)：返回符合過濾條件的被選元素，如filter(".red")，返回帶有類red的被選元素。

(3)、first()；

(4)、last()；

(5)、not(條件)：與filter相反。

三、css選擇器優先順序

(1)、:hover等偽類高於自定義的class，若定義了：hover，則無法通過增刪class達到實現相應的mouseenter、mouseover等事件。

解決方法，不用：hover，也將本來的hover效果定義為class，通過js控制。

(2)、若有多處同名的class，尋找某處的具有該class的元素應該在前面新增某個父類元素作定位。

四、css體會

(1)、對於同級的具有同種class或相同的元素，其基本樣式一般相同，也正因此，可單獨定義為一個class，或通過派生查詢規定統一樣式。若此時個別元素具有特殊樣式，可將特殊樣式單獨分離(不寫在統一樣式中，此時統一樣式的此樣式值為預設值)，單獨設定另一個class，並通過該class設定特殊樣式。

如，假設有一個水平的列表：

<ul>

<li class="floatLeft"><li>

<li class="floatLeft"><li>

<li class="marginLeft"><li>

</ul>

ul{

list-style:none;

width:206px;

height:52px;

line-height:30px;

}

對應公有屬性設定：
.ul>li{
/*公有屬性中不設定私有屬性設定，結構清晰同時也避免一些錯誤*/

width: 50px;
height: 30px;
border:1px solid #ccc;
}
對應私有屬性設定：
.floatLeft{
float: left;

}
.marginLeft{

margin-left:150px;

}

五、css注意事項

(1)、使用元素名與class名或屬性等組合查詢時，元素名與class的點號之間不能有空格，否則查詢不到！！！如：

div.panel{/*找class為panel的div並設定樣式*/}

div#panel{/*找id為panel的div並設定樣式*/}

div[style]{/*找具有style屬性的div並設定樣式*/}

。。。