前端學習 Css 兄弟元素選擇器

2022-05-09 05:24:10 字數 1140 閱讀 6144

為乙個元素後邊的元素設定css樣式：

語法：前乙個 + 後乙個。

作用：可以選中乙個元素後緊挨著的指定的兄弟元素。

為乙個元素後邊的所有相同元素設定css樣式：

語法：前乙個 ~ 後邊所有。

doctype html


>


<


html


>


<


head


>


<


meta 


charset


="utf-8"


>


<


title


>


title


>


<


style 


type


="text/css"


>h1 + pspan ~ p


style


>


head


>


<


body


>


<


h1>我是乙個h1標籤


h1>


<


p>我是乙個p標籤


p>


<


p>我是乙個p標籤


p>


<


p>我是乙個p標籤


p>


<


p>我是乙個p標籤


p>


<


p>我是乙個p標籤


p>


<


p>我是乙個p標籤


p>


<


span


>我是乙個span


span


>


<


p>我是乙個p標籤


p>


<


p>我是乙個p標籤


p>


<


p>我是乙個p標籤


p>


<


a href


=""a>


<


p>我是乙個p標籤


p>


body


>


html


>
效果：

兄弟元素選擇器

後乙個兄弟元素選擇器 作用 可以選中乙個元素後緊挨著的指定的兄弟元素 語法 前加乙個 後乙個 被選中 前加乙個 後邊所有 被選中 charset utf 8 兄弟元素選擇器title type text css 為span後的p元素設定乙個背景顏色為黃色 後乙個兄弟元素選擇器 作用 可以選中乙個元素...

CSS後代選擇器 子元素選擇器 相鄰兄弟選擇器

後代選擇器 後代選擇器 descendant selector 又稱為包含選擇器。後台選擇器可以選擇作為某元素後代的元素。例子 如果只希望h1元素中的em元素應用樣式，可以這樣寫 em元素 強調文字 h1 em this is a important paragraph.注意 如果寫作ul em，這...

css後代選擇器，相鄰兄弟選擇器，子元素選擇器

後代選擇器 element element 例 div p 將會選中div元素中的p元素 相鄰兄弟選擇器 element element 例 div p 將會選中div元素塊結束後緊跟著的p 元素，即形為.的p元素會被選中 子元素選擇器 element element 例 div p 當div是p的...