一、css選擇器。
a、基本選擇器詳解。
名稱ps：css選擇器優先順序的結論是：id選擇器優先順序 > 類class選擇器優先順序 > 標籤選擇器優先順序語法構成
描述返回值
示例標籤選擇器
element
根據給定的標籤名匹配元素
元素集合
$(「h2」)選取所有的h2元素
類選擇器
.class
根據給定的class匹配元素
元素集合
$(「.title」)選取所有class為title的元素
id選擇器
id根據給定的id匹配元素
單個元素
$(「#title」)選取id為title的元素
並集選擇器
selector1,
selector2,
….,selectorn
將每乙個選擇器匹配的元素
合併後一起返回
元素集合
$(「div,p,.title」)選取
所有div、p和擁有class為
title的元素。
交集選擇器
element.class或 element#id
匹配指定class 或 id 的某元素
或元素集合（若在同一頁面中
指定id的元素返回值，則一定
是單個元素；若指定class 的元
素，則可以是單個元素，也可
以是元素集合）
單個元素或
多個元素集合
$("h2.title")選取所有擁有class為title的h2元素。
全域性選擇器
*匹配所有元素
集合元素
$(「*」)選取所有的元素
b、層次選擇器的詳細
名稱c、屬性選擇器的詳細語法構成
描述返回值
示例後代選擇器
ancestor
descendant
選取ancestor元素裡的所有
descendant（後代）元素
元素集合
$(「#menu span」)選取#menu 下
所有的
元素子選擇器
parent>child
選取parent元素下的child(子)
元素元素集合
$(「#menu>span」)選取#menu下
的子元素
相鄰元素選擇器
prev+next
選取緊鄰prev元素之後的
next元素
元素集合
$(「h2+dl」)選取緊鄰
元素之後的同輩元素
元素。同輩元素選擇器
prev~sibimgs
選取prev元素之後的
所有siblings（同輩）元素
元素集合
$(「h2~dl」)選取
元素之後的所有同輩元素
元素
語法構成描述返回值
示例[attribute]
選取包含給定屬性
的元素元素集合
$(「[href]」)選取含有href屬性的元素。
[attribute = value]
選取等於給定屬性是
某個特定值的元素
元素集合
$(「[href = 『#』]」)選取href屬性值為
「#」的元素。
[attribute != value]
選取不等於給定屬性是
某個特定值的元素
元素集合
$(「[href != 『#』]」)選取href屬性值不
為「#」的元素。
[attribute ^= value]
選取給定屬性是
以某些特定值開始的元素
元素集合
$(「[href ^= 『en』]」)選取href屬性值以
「en」開頭的元素。
[attribute $= value]選取給定屬性是以某些特定值結尾的元素
元素集合
$("[href $= '.jpg']")選取href屬性值以「.jpg」結尾的元素。
[attribute *= value]選取給定屬性是包含某些值的元素
元素集合
$("[href *= 'txt']")選取href屬性值中含有「txt」的元素。
[selector]
[selector2]
[selectorn]
選取滿足多個條件的
復合屬性的元素
元素集合
$("li[id][title=新聞要點]")選取含有id屬性和title屬性為「新聞要點」的
元素。
css選擇器 CSS選擇器總結
在前不久的專案中，實習小妹妹在乙個全域性的樣式中使用了下面這個css選擇器 content 對應的html結構大致是 實習妹子大致的意思是想要讓content下的子元素div的高度100 但是貌似她沒有真正理解first child的意義，從而導致這個全域性的樣式讓 所有頁面都出現了問題，然後我就只...
CSS總結 CSS選擇器
css3選擇器最新部分，有人也稱這種選擇器為css3結構類，下面我們通過實際的應用來具體了解他們的使用和區別，首先列出他具有的選擇方法 first child選擇某個元素的第乙個子元素 last child選擇某個元素的最後乙個子元素 nth child 選擇某個元素的乙個或多個特定的子元素 nth...
CSS選擇器總結
通用選擇器 選擇所有元素 css2 型別選擇器 element 根據型別選擇元素 css1 類選擇器 class 根據全域性屬性class的值選擇元素 css1 id選擇器 id 根據全域性屬性id的值選擇元素 css1 屬性選擇器 attr 基於屬性選擇元素 css2 attr val 選擇定義a...