前端知識 css選擇器總結

2021-10-15 00:15:06 字數 911 閱讀 9014

div{}

.class{}

#id{}

問:id與標籤選擇器區別?

答:id只能使用一次。

*{}缺點:效能問題

為元素新增特殊效果

鏈結偽類

a:link

a:visted

a:hover

a:actived

結構偽類

:first-child

:last-child

:nth-child(n)

:nth-last-child(n) 或者 odd even 2n 偶數 2n+1奇數 3n 3的倍數使用公式n是從0開始的

目標偽類

:target 使用a href=「id名」進行跳轉 會將跳轉的id選擇器元素樣式變化

交並補反

div.move{} div中帶有move class類名的元素
逗號分隔用於集體宣告

h1,

h2{}

空格隔開

div span{}

div所有孩子裡面的span

>隔開

div>span{}

div直接孩子裡面的span

按照標籤屬性進行選擇 相當於id 類選擇器的超集

e[attr] 含有attr屬性就可

e[attr=val] 屬性值=val

e[attr*=val] 包含

e[attr^=val] 開始

e[attr$=val] 結束

e::first-letter 第乙個字

::before::after 必須有個content:""

css知識總結 選擇器

css選擇器規定了css規則用於那些元素上 選擇器示例 示例說明 通用元素選擇器,匹配所有的元素。class info 類選擇器,匹配所有class屬性值中包含info的元素。element p標籤選擇器。匹配p標籤。id info id選擇器,匹配id屬性為 info的元素。選擇器示例 示例說明 ...

css選擇器 CSS選擇器總結

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

前端 css 選擇器

css 為了修飾頁面作用,讓頁面好看 css的引入方式 1,行內樣式 body裡面 2,內接樣式 在html裡面的 style 裡面 3,外接樣式 兩種 鏈結式 匯入式 優先順序 行內優先順序 最高 內接的優先順序 外接優先順序 引入 id 的優先順序 比 class 的優先順序要高 標籤選擇器 d...