【CSS基礎學習】複雜選擇器

CSS第二課-複雜選擇器

羣組選擇器

格式

選擇器1,選擇器2,,,選擇器n{聲明的屬性和屬性值}

例:

p,h1{
	color: blue;
}

用於對於多個選擇器進行樣式修改,由簡單選擇器組合而成的選擇器,可以是簡單選擇器中的任意組合,如上面代碼例,就是修改了p標籤和h1標籤的字體顏色。

屬性選擇器

根據屬性名查找元素

格式

元素[屬性名]{
	聲明的屬性和屬性值;
}

例:

p[id]{
	color: blue;
}

前面添加元素的名字,然後後面加上屬性名,比如上例,就是p標籤,其中帶有id的元素,然後把字體顏色設置爲藍色。

根據屬性值精確查找

格式

元素[屬性名=屬性值]{
	聲明的屬性和屬性值;
}

例:

p[class = 'p2']{
	color: blue;
}

和上面的根據屬性名查找差不多,只不過更加精確了,精確到了屬性名後面的屬性值,上例就是作用於p標籤,只不過條件是爲帶有class屬性,並且屬性值爲p2的p標籤。

多屬性選擇器

格式

元素[屬性名或屬性表達式][屬性名或屬性表達式]..{
	聲明的屬性和屬性值;
}

例:

p[title][class]{
	color: blue;
}

元素後面加。屬性名或屬性表達式,可以加+∞個,但是沒必要。上例爲:設置title屬性和class屬性的段落p標籤的樣式

根據屬性值近似查找

格式

元素[元素名~=屬性值]{
	聲明的屬性和屬性值;
}

元素[屬性名|=值]{
	聲名的屬性和屬性值;
}

例:

p[class~='red']{
	color: blue;
}

注意,這裏是~=,爲約等於,就是找滿足符合約等於條件的標籤,上例爲:設置class屬性的值,包含red屬性名的標籤

根據標籤查找

格式

元素名1~元素名2{
	聲名的屬性和屬性值;
}

例:

a~p{
	color: blue;
}

a標籤後面的每一個p標籤,都進行了樣式的修改。

派生選擇器

後代選擇器

格式

父類標籤 子類標籤{ /*注意倆標籤中間有空格*/
	聲名的屬性和屬性值;
}

例:

div strong{
	color: blue;
}

後代選擇器是用一個空格符隔開的兩個或更多的簡單選擇器組成的字符串,可以是直接孩子節點,也可以是間接孩子節點,上例這樣就把div裏面的strong標籤的樣式進行了修改。

子元素選擇器

格式

父標籤>子標籤{
	聲名的屬性和屬性值;
}

例:

div>p>strong{
	color: blue;
}

使用>分隔的直接孩子節點,比如是依次的直接孩子節點,不能一下跳躍到別的標籤,上例爲,按照div–>p–>strong,的順序進行尋找,然後對strong標籤的樣式進行修改。

相鄰兄弟選擇器

格式

父標籤+子標籤{
	聲名的屬性和屬性值;
}

例:

#div1 + p{
	color: blue;
}

相鄰兄弟選擇器可選擇緊接在另一個元素後的元素,且二者具有相同的父親元素。註釋:與子結合符一樣,相鄰兄弟結合符旁邊可以有空白符。

編程我也是初學者,難免有理解錯誤的地方,希望大家看完之後,發現錯誤可以評論出來,謝謝大家

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章