CSS選擇器的區別

2021-07-11 18:27:54 字數 2723 閱讀 3646

css的修煉心得

學習css之前必須得對html有基礎的了解。

css即層疊樣式表(cascading style sheets),學習css是為了將內容與表現分離,實現更好的頁面布局,具有兩個特性:繼承性和層疊性。

一:css的使用方式:css有三種運用方式,可以單獨使用也可以一起使用。

1.行內樣式:直接在html的標籤中使用style屬性。如:

執行效果可以自己演示一下

2.類選擇器:class=」 名字」

使用類選擇器: 在要使用這個選擇器的網頁元素中使用class屬性 class=」類選擇器的名字」

影響的範圍:網頁中所有設定了class=」」的標籤,可以跨標籤

.名字如:

執行效果可以自己演示一下

3-id選擇器: #名字

使用id選擇器: 在要使用這個選擇器的網頁元素中設定id屬性: id=」 類選擇器的名字」

影響的範圍:網頁中設定了此id的標籤,通常只影響單個網頁元素

#one

語法與類選擇器一樣,只是將 「 . 」換成」 # 」;中class換成 id ;

**就不演示了.

三:復合選擇器:

1-後代選擇器

語法:選擇器1空格選擇器2

影響範圍:

選擇器1

的後代(

包括直接後代和間接後代

)中所有符合選擇器

2的元素

其執行效果:

2-交集選擇器

以標籤選擇器開始,後面跟上類選擇器或者id

選擇器

例如: p.speical

影響到同時滿足

2種選擇器的元素

其效果如下:

3- 並集選擇器

樣式相同的多個選擇器的集體宣告,多個選擇器之間用逗號隔開

其執行效果:

4-子元素選擇器:

用法大概和後代選擇器一樣的用法.但是子元素的範圍更小,其只能影響元素的子元素. 不能用於間接元素.

如果您不希望選擇任意的後代元素,而是希望縮小範圍,只選擇某個元素的子元素,請使用子元素選擇器  (child selector)。

例如,如果您希望選擇只作為 h1 元素子元素的 strong 元素,可以這樣寫:

h1 > strong

如其執行效果:

如:

其效果如下:

5-相鄰兄弟選擇器:

如果需要選擇緊接在另乙個元素後的元素,而且二者有相同的父元素,可以使用相鄰兄弟選擇器               (adjacent sibling selector)。

例如,如果要增加緊接在 h1 元素後出現的段落的上邊距,可以這樣寫:

h1 + p     

如:this is paragraph.

this is paragraph.

this is paragraph.

this is paragraph.

this is paragraph.

其效果:

this is paragraph.

this is paragraph.

this is paragraph.

this is paragraph.

this is paragraph.

a:link     正常狀態下

a:visited 已被訪問過的

a:hover  懸停狀態下的

a:active  啟用狀態下的

上面的順序不能改變.

first-child     第乙個元素.

如下面的例子:

some text

some text

其執行效果:只有第乙個標籤有效果

some text

some text

7-偽元素

you can use the :first-line pseudo-element to add a special effect to the first

line of a text!

其效果如下:

選擇器大致就這幾種,許多都是相通的.根據情況選用適合的選擇器

css屬性選擇器 , , , , 的區別

value是完整單詞 型別的比較符號 拼接字串 型別的比較符號 1.attribute屬性中包含value attribute value 屬性中包含獨立的單詞為value e.g title flower attribute value 屬性中做字串拆分,只要能拆出來value這個詞就行 e.g ...

css後代選擇器和子選擇器的區別

點評 css後代選擇器和子選擇器的區別 用法不同,相容性,所達到的效果不同等等,需要了解的朋友可以參考下1.用法不同 比如要找div的class名為con中p標籤,子代選擇器用法 div.con p 後代選擇器 con p 2.相容性 ie6不支援子代選擇器 3.所達到的效果不同 看下圖用子代選擇器...

css選擇器 CSS選擇器總結

在前不久的專案中,實習小妹妹在乙個全域性的樣式中使用了下面這個css選擇器 content 對應的html結構大致是 實習妹子大致的意思是想要讓content下的子元素div的高度100 但是貌似她沒有真正理解first child的意義,從而導致這個全域性的樣式讓 所有頁面都出現了問題,然後我就只...