面試 細談CSS選擇器以及它們的權重關係？

2021-10-19 18:15:32 字數 4525 閱讀 1497

2.css選擇器的權重關係，優先順序？

html 


h1 h2
="important"


>


this heading is very important.


<


/h1>
.important
注：類選擇器的靈活性

1.可結合元素選擇器

可能希望只有段落顯示為紅色文字：

p.important
2.可多個類選擇器（允許有以空格分隔的詞列表）

="important warning"


>


this paragraph is a very important warning.


<


/p>
.important


.warning


.important.warning


"intro"


>this is a paragraph of introduction.


<


/p>
#intro
注：id選擇器的侷限性

1.類選擇器可多處使用，而id選擇器只能使用一次

2.id選擇器不允許有以空格分隔的詞列表

ps：在html和xml語言中，類選擇器和id選擇器是區分大小寫的

把包含標題（title）的所有元素變為紅色

*[title]
只對有 href 屬性的錨（a 元素）應用樣式

a[href]
將同時有 href 和 title 屬性的 html 超連結的文字設定為紅色

a[href][title]
對所有帶有 alt 屬性的影象應用樣式

img[alt]
由於屬性選擇器較少用，就不在這裡佔較大篇幅啦，可點鏈結學習

xml語言的屬性選擇器知識點：css屬性選擇器詳解

把作為 h1 元素後代的 em 元素的文字變為 紅色

this is a important<


/em> heading<


/h1>


//會應用到樣式


this is a important<


/em> paragraph.


<


/p>


//不會應用到樣式
h1 em
注：與後代選擇器相比，子元素選擇器（child selectors）只能選擇作為某元素子元素的元素。

把第乙個 h1 下面的兩個 strong 元素變為紅色

this isvery<


/strong>


very<


/strong> important.


<


/h1>


//受影響


this is reallyvery<


/strong>


<


/em> important.


<


/h1>


//不受影響
h1 > strong
可選擇緊接在另一元素後的元素，且二者有相同父元素

增加緊接在 h1 元素後出現的段落的上邊距

h1 + p


//選擇緊接在 h1 元素後出現的段落，h1 和 p 元素擁有共同的父元素
a.錨偽類

a:link


/* 未訪問的鏈結 */


a:visited


/* 已訪問的鏈結 */


a:hover


/* 滑鼠移動到鏈結上 */


a:active


/* 選定的鏈結 */
注：

1.在 css 定義中，a:hover 必須被置於 a:link 和 a:visited 之後，才是有效的。

2.在 css 定義中，a:active 必須被置於 a:hover 之後，才是有效的。

3.偽類名稱對大小寫不敏感。

4.可與css類配合使用

//鏈結被訪問過，則顯示為紅色


a.red : visited


"red" href="css_syntax.asp">css syntax
b. :first-child偽類

匹配第乙個元素

some text


//應用樣式


some text


//不會應用樣式
匹配所有元素中的第乙個元素

some text. some text.


some text. some text.
匹配所有作為第乙個子元素的元素中的所有元素

some text. some text.


some text. some text.
c. :lang偽類

:lang 類為屬性值為 no 的 q 元素定義引號的型別

文字"no">段落中的引用的文字文字
a. :first-line 偽元素

「first-line」 偽元素用於向文字的首行設定特殊樣式

注：「first-line」 偽元素只能用於塊級元素。

注：下面的屬性可應用於 「first-line」 偽元素：

font

color

background

word-spacing

letter-spacing

text-decoration

vertical-align

text-transform

line-height

clear

b. :first-letter 偽元素

「first-letter」 偽元素用於向文字的首字母設定特殊樣式

p:first-letter
注：「first-letter」 偽元素只能用於塊級元素。

注：下面的屬性可應用於 「first-letter」 偽元素：

font

color

background

margin

padding

border

text-decoration

vertical-align (僅當 float 為 none 時)

text-transform

line-height

float

clear

c. :before 偽元素

「:before」 偽元素可以在元素的內容前面插入新內容。

h1:before
d. :after 偽元素

「:after」 偽元素可以在元素的內容之後插入新內容。

h1:after
注：

1.偽元素可與類配合使用

p.article:first-letter


"article">this is a paragraph in an article。
2.可多個偽元素一起使用

p:first-letter


p:first-line


//段落的第乙個字母將顯示為紅色，其字型大小為 xx-large。第一行中的其餘文字將為藍色，並以小型大寫字母顯示。段落中的其餘文字將以預設字型大小和顏色來顯示
1.最高優先順序是 (直接在標籤中的設定樣式，假設級別為1000)

2.次優先順序是（id選擇器 ,假設級別為100）#mydiv

3.其次優先順序是（類選擇器，假設級別為10）.divclass

4.最後優先順序是 （標籤選擇器，假設級別是 1）div

5.那麼後代選擇器的優先順序就可以計算了

比如.divclass span優先級別就是：10+1=11

CSS選擇器相關以及CSS選擇器的優先順序

首先，當我們給css中的選擇器設定樣式後，有一些屬性並沒有起作用。通過firebug檢視發現一些屬性被覆蓋了。那麼css的優先順序是如何的呢？在css中，基本選擇器諸如 id選擇器，class類選擇器，還有標籤選擇器。組合使用的時候，又有後代選擇器和群組選擇器。語法 id選擇器 id 文字相關 類選...

css選擇器 CSS選擇器總結

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

Flex布局以及CSS選擇器

1 css 元素選擇器 最常見的 css 選擇器是元素選擇器。換句話說，文件的元素就是最基本的選擇器。1 html 2h1 3 h2 2 css 選擇器分組 通過分組，創作者可以將某些型別的樣式 壓縮 在一起，這樣就可以得到更簡潔的樣式表。1 no grouping 2h1 3h2 4h3 5h4 ...