你一定要知道的CSS選擇器

2021-10-12 12:53:49 字數 1665 閱讀 8415

什麼是選擇器:

每一條css樣式定義由兩部分組成,形式如下:

[code] 選擇器
[/code] 在{}之前的部分就是「選擇器」, 「選擇器」指明了{}中的「樣式」的作用物件,也就是「樣式」作用於網頁中的哪些元素。

基礎選擇器

p
如:

#demodiv
如:

.demodiv
*
p,h1,span
#main p, #sider span
使用群組選擇器,將會大大的簡化css**,將具有多個相同屬性的元素,合併群組進行選擇,定義同樣的css屬性,這大大的提高了編碼效率,同時也減少了css檔案的體積。

層次選擇器

p>span
section span
子選擇器與後代選擇器的區別:

1)子選擇器(child selector)僅是指它的直接後代,而後代選擇器是作用於所有子後代元素;

2)子選擇器是通過「>」進行選擇,而後代選擇器通過空格來進行選擇;

h1 + p
偽類選擇器

偽類可以應用在鏈結標籤中,也可以應用在一些表單元素中,但表單元素的應用ie不支援,所以一般偽類都只會被應用在鏈結的樣式上。

偽元素選擇器:

所有偽元素選擇器都必須放在出現該偽元素的選擇器的最後面,也就是說偽元素選擇器不能跟任何派生選擇器;

div p:first-letter 

//選擇div元素裡所有的p元素的第乙個字母或漢字;

.box .main:first-line  

//只有部分屬性允許first-line:所有font屬性、color、所有background屬性、word-spacing、letter-spacing、text-decoration、vertical-align、text-transform、line-height

body:before 

//在body元素前插入文字內容'the start:',並設定其為塊元素

body:after 

//在body元素最後插入文字內容'the end.',並設定其為塊元素

屬性選擇器

是根據元素的屬性來匹配的,其屬性可以是標準屬性也可以是自定義屬性;也可以同時匹配多個屬性;

input[type=「text」]
input[type^=「te」]+span
input[type $ =「d」]+span
input[type*=「i」]+span
結語:想學習web前端的朋友,和需要前端資料的朋友都可以加入這邊的學習裙,前面:953,中間:352,最後:883,裙裡從小白到大佬都有,還有前端學習資料,前端面試題pdf文件,免費分享,不見不散哦!

超高效Macbook設定,這些你一定要知道

剛入手mac的小夥伴們可能會不習慣macos裡的預設設定,那麼如何做一些設定能讓新買的macbook用起來更順手更高效呢?今天公尺粒就整理了一些超高效的macbook設定,希望對還不習慣用mac的新手使用者有些幫助!觸發角首先要跟大家說到的就是大家最容易忽視的乙個功能,它就是觸發角。只要將滑鼠指標滑...

關於MySQL核心,一定要知道的!

近乙個多月,寫了一些mysql核心的文字,稍作總結,希望對大家有幫助。1.innodb,為何併發如此之高?文章介紹了 1 什麼是併發控制 2 併發控制的常見方法 鎖,資料多版本 3 redo,undo,回滾段的實踐 4 innodb如何利用回滾段實現mvcc,實現快照讀。結論是,快照讀 snapsh...

你一定要知道的C語言解題思路4

break適用於switch分支語句while,do,for語句 if語句中else相當於break 使用 define pi 3.1415 x 456.789 printf 8.2f x 輸出輸出為 456.79 賦值時注意先加後用a i其他不用 開方 include math.h sqrt 平方...