css3 選擇器 CSS3選擇器詳解

2021-10-13 18:19:21 字數 2678 閱讀 6132

css3在css2基礎上,增強新增了許多特性, 彌補了css2的眾多不足之處,使得web開發變得更為高效和便捷。

比如說,同樣是乙個頭像,可能在低版本的瀏覽器中,頭像方的;在高版本的瀏覽器中,頭像是圓的。

漸進增強和優雅降級之間的不同(面試題目)

由於css3普遍存在相容性問題,為了避免因相容性帶來的干擾,瀏覽器的建議版本為:

比如說,表示可以設定一至四個引數。

下面講css3的基礎知識。本文講一下 css3 選擇器的內容。

我們之前學過 css 的選擇器,比如:

``` div 標籤選擇器

.box 類名選擇器

#box id選擇器

div p 後代選擇器

div.box 交集選擇器

div,p,span 並集選擇器

div>p 子代選擇器

* : 萬用字元

div+p: 選中div後面相鄰的第乙個p

div~p: 選中的div後面所有的p

css3新增了許多靈活查詢元素的方法,極大的提高了查詢元素的效率和精準度。css3選擇器與 jquery 中所提供的絕大部分選擇器相容。

屬性選擇器的標誌性符號是

匹配含義:

^:開頭 $:結尾 *:包含

格式:比如說,我們用屬性選擇器去匹配標籤的classname,是非常方便的。

這裡我們用class屬性來舉例。**舉例:

```html

css3-屬性選擇器簡介

最後來張**:

偽類選擇器的標誌性符號是:

css中有一些偽類選擇器,比如:link:active:visited:hover,這些是動態偽類選擇器。

css3又新增了其它的偽類選擇器。這一小段,我們來學習css3中的結構偽類選擇器:即通過結構來進行篩選。

1、格式:(第一部分)

理解:(2)注意:以上選擇器中所選到的元素的型別,必須是指定的型別e,如果選不中,則無效。這個要好好理解,具體可以看css參考手冊中的e:nth-child(n)的示例。我們可以理解成:先根據選擇器找到選中的全部位置,如果發現某個位置不是型別e,則該位置失效

(3)另外,e:nth-child(n)這個屬性也很有意思。比如,針對下面這樣一組標籤:

html

上方**中:

上面列舉的選擇器中,我們只要記住:n表示 0,1,2,3,4,5,6,7,8.....就很容易明白了。

2、格式:(第二部分)

既然上面這幾個選擇器帶有type,我們可以這樣理解:先在同級裡找到所有的e型別,然後根據 n 進行匹配。

3、格式:(第三部分)

舉例:

我們可以把多個偽類選擇器結合起來使用,比如:

如果想把上圖中,第一行的前三個 span 標紅,我們可以這樣使用結構偽類選擇器:

css dt:first-child span:nth-of-type(-n+3)

最後來張**:

偽元素選擇器的標誌性符號是::

1、格式:(第一部分)

e:aftere:before在舊版本裡是偽類,在 css3 這個新版本裡是偽元素。新版本裡,e:aftere:before會被自動識別為e::aftere::before,按偽元素來對待,這樣做的目的是用來做相容處理。

舉例:```html

生命壹號

效果如下:

上圖可以看出

2、格式:(第二部分)

e::first-letter的舉例:

e::first-line的舉例:

最後來張**:

css3 選擇器 CSS3選擇器

子級選擇器用於選取帶有特定父元素的元素。書寫語法 element1 element2 注意 如果 element2 元素不是父元素 element1 的直接子元素,則不會被選擇。符號之前書寫父級的選擇器,符號之後寫子級選擇器,必須滿足父子級關係才選中標籤 相鄰兄弟選擇器可以用於選擇緊接在另乙個元素後...

CSS3選擇器 屬性選擇器

指定屬性名,但沒有確定任何屬性值 type text css div div title style div1div title name div2div title age div3div body 指定屬性名,並指定了該屬性的屬性值 其他 與上述相同 div title name 指定屬性名,具...

CSS3 選擇器 屬性選擇器

屬性選擇器早在css2中就被引入了,其主要作用就是對帶有指定屬性的html 元素設定樣式。使用css3屬性選擇器,你可以只指定元素的某個屬性,或者你還可以同時指定元素的某個屬性和其對應的屬性值。選擇有某個屬性的元素,而不管這個屬性的值是什麼。選擇有某個屬性的元素,並且要求這個元素的屬性的屬性值只能為...