CSS基礎學習 複雜選擇器

2021-10-04 21:09:27 字數 2256 閱讀 7986

派生選擇器

格式

選擇器1,選擇器2,,,選擇器n
例：

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

根據屬性名查詢元素

格式

元素[屬性名]
例：

p[id]
前面新增元素的名字，然後後面加上屬性名，比如上例，就是p標籤，其中帶有id的元素，然後把字型顏色設定為藍色。

根據屬性值精確查詢

格式

元素[屬性名=屬性值]
例：

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

多屬性選擇器

格式

元素[屬性名或屬性表示式][屬性名或屬性表示式]..
例：

p[title][class]
元素後面加。屬性名或屬性表示式，可以加+∞個，但是沒必要。上例為：設定title屬性和class屬性的段落p標籤的樣式

根據屬性值近似查詢

格式

元素[元素名~=屬性值]
或

元素[屬性名|=值]
例：

p[class~='red']
注意，這裡是~=，為約等於，就是找滿足符合約等於條件的標籤，上例為：設定class屬性的值，包含red屬性名的標籤

根據標籤查詢

格式

元素名1~元素名2
例：

a~p
a標籤後面的每乙個p標籤，都進行了樣式的修改。

後代選擇器

格式

父類標籤 子類標籤
例：

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

子元素選擇器

格式

父標籤》子標籤
例：

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

相鄰兄弟選擇器

格式

父標籤+子標籤
例：

#div1 + p
相鄰兄弟選擇器可選擇緊接在另乙個元素後的元素，且二者具有相同的父親元素。注釋：與子結合符一樣，相鄰兄弟結合符旁邊可以有空白符。

複雜的CSS選擇器

一.基本的css選擇器 1.萬用字元 例 2.類別選擇器 例 container 3.id選擇器 例 div1 4.群組選擇器 例 span,class,id 5.並列選擇器 例 div.class 6.子代選擇器 例 div span 7.直接子代選擇器 例 div span 二.複雜的css選擇...

CSS選擇器之基礎選擇器

選擇器 選擇符 就是根據不同需求把不同的標籤選出來這就是選擇器的作用。簡單來說，就是選擇標籤用的。標籤選擇器 又稱元素選擇器，指用html標籤作為選擇器，為頁面中某類標籤設定css樣式。缺點 不能差異化設定樣式，只能選擇全部的當前標籤。語法 基礎選擇器之標籤選擇器title 標籤選擇器 寫上標籤名 ...

CSS 選擇器之基礎選擇器

id選擇器 選擇具體的id屬性值的元素 元素選擇器 選擇具有相同標籤名稱的元素 類選擇器 選擇具有相同的class屬性值的元素。id選擇器，是根據標籤的id屬性值選擇對應的標籤的。格式 id值舉例 定義兩個p標籤，且標籤的id屬性值不同，然後用css定義p標籤的內容如何顯示。google瀏覽器中開啟...