CSS基本選擇器容易被遺忘的

2021-09-01 19:06:16 字數 909 閱讀 7071

1、相鄰兄弟元素選擇器(e + f)

相鄰兄弟選擇器可以選擇緊接在另一元素後的元素,而且他們具有乙個相同的父元素,換句話說,ef兩元素具有乙個相同的父元素,而且f元素在e元素後面,而且相鄰,這樣我們就可以使用相鄰兄弟元素選擇器來選擇f元素。

li + li
上面**表示選擇li的相鄰元素li,我們這裡一共有十個li,那麼上面的**選擇了從第2個li到 10 個li,一共九個

因為上面的li+li其中第二li是第一li的相鄰元素,第三個又是第二個相鄰元素,因此第三個也被選擇,依此類推,所以後面九個li都被選中了,如果我們換過一種方式來看,可能會更好的理解一點:

.active + li
按照前面所講的知識,這句**很明顯選擇了li.active後面相鄰的li元素,注意了和li.active後面相鄰的元素僅只有乙個的。

ie6不支援這個選擇器

2、通用兄弟選擇器(e 〜 f)通用兄弟元素選擇器是css3新增加一種選擇器,這種選擇器將選擇某元素後面的所有兄弟元素,他們也和相鄰兄弟元素類似,需要在同乙個父元素之中,換句話 說,e和f元素是屬於同一父元素之內,並且f元素在e元素之後,那麼e ~ f 選擇器將選擇中所有e元素後面的f元素。比如下面的**:

.active ~ li
上面的**所表示的是,選擇中了li.active 元素後面的所有兄弟元素li

ie6不支援這種選擇器的用法。

個人感覺:通用兄弟選擇器比相鄰兄弟選擇器更靈活一些。

這兩個都是css中不常用的選擇器,在此記錄下,容易忘記。

CSS 基本選擇器

css的選擇器 告訴css的 作用在哪個標籤上。基本選擇器 標籤名選擇器 div span 類選擇器 在html的標籤上,提供了屬性 class,定位到div的標籤 美工經常使用的方式 寫法 class的名稱 hehe 設定不同的標籤,具有相同的樣式 id選擇器 在html的標籤上,提供的屬性 設定...

基本CSS選擇器

基本css選擇器,復合選擇器,後代選擇器 基本css選擇器有標記選擇器 類別選擇器 id選擇器3種 1。標記選擇器 每一種html標記的名稱都可以作為相應的標記選擇器的名稱,如h1,p,等等 2。類別選擇器 類別選擇器的名稱可以由使用者自定義 格式如下 class 3。id選擇器 與類別選擇器相試 ...

CSS基本選擇器

作用 選擇介面上的某乙個或者某一類元素 標籤選擇器會選擇到頁面上所有的這個標籤的元素 h1 h1為標籤 選擇所有class屬性一致的標籤,跨標籤 同乙個標籤,但是顏色不同,則不能用標籤選擇器。在標籤內定義class,並在style中分別用類選擇器定義顏色 好處 可以多個標籤歸類,是同乙個class,...