css設計指南 筆記2

2022-02-25 02:21:18 字數 2024 閱讀 1297

上下文選擇符以空格作為分隔符,分組選擇符以逗號作為分隔符

上下文選擇符選擇的是所有符合條件的後代元素(包括直接後代和間接後代元素)

1.子選擇符 >

標籤1 > 標籤2

//標籤2必須是標籤1的子元素

//反過來,標籤1必須是標籤2的父元素而不是其他祖先元素

2.緊鄰同胞選擇符 +

標籤1 + 標籤2

//標籤2必須緊跟其同胞標籤1的後面

//標籤2只代表同胞的第乙個元素

3.一般同胞選擇符 ~

標籤1 ~ 標籤2

//標籤2必須跟(不一定緊跟)在其同胞標籤1後面

//標籤2只代表同胞的所有滿足條件的元素,不包括其他子元素

如this is paragraph 1

paragraph 2 has a link in it.

link

//h2 ~ a 只影響link鏈結,而不影響a link鏈結。

4.通用選擇符 *
1、* 		//匹配任何元素

2、p * //p包含的所有元素

3、section * a //任何是section孫子元素,而非子元素的a標籤(非子選擇符)

如this is paragraph 1

paragraph 2 has a link in it.

link

//2選中的是a link,而非p裡面的其他直接文字節點。

//3選中的是a link元素,而非link元素。

乙個冒號表示偽類,兩個冒號表示css3新增的偽元素

1、ui(使用者介面)偽類
在html元素處於某個狀態時,為該元素應用css樣式

鏈結偽類

a:link {}		//鏈結初始狀態

a:visited {} //點選過的鏈結(用稍淺一些的顏色)

a:hover {} //懸停時的鏈結

a:active {} //鏈結正在被點選(滑鼠在元素上按下,還沒有釋放)

//必須按照以上順序使用

//巧記:「love?ha!」

:focus偽類

e:focus		//e代表任何元素

input:focus

//表單中的文字欄位在使用者單擊時獲得焦點,此時新增乙個藍色邊框

:target偽類

e:target	//使用者點選指向頁面中其他元素的鏈結,那個元素就是目標,用:target選中它

more information#more:target

//單擊鏈結,轉向h2元素,為h2元素新增樣式。

2、結構化偽類
根據標記的結構應用樣式

e:first-child		//一組同胞元素中的第乙個元素

e:last-child //一組同胞元素中的最後乙個元素

e:nth-child(n) //一組同胞元素中的第幾個元素

e:nth-child(odd/even) //一組同胞元素中的奇數或偶數元素

e::first-letter		//元素的第乙個字元(用於首字元放大效果)

e::first-line //元素的第一行(長度隨瀏覽器視窗大小的變化而改變)

e::before //在元素前面新增內容

e::after //在元素後面新增內容

25p::before

p::after

//age: 25 year.(注意新增空格)

css設計指南 筆記7

過渡屬性 transition property 過渡的css屬性名,如color width transition duration 過渡的持續時間,如2s 500ms transition timing function 過渡的調速函式,如linear ease in ease out ease...

css設計指南 筆記5

position static 靜態定位 position relative 相對定位 top 25px left 30px 相對於原本在文件流中的位置的偏移,原來佔據的空間沒有動,其他元素也沒有動 position absolute 絕對定位 top 25px left 30px 脫離文件流,相對...

css設計指南 筆記3

計算特指度 ice公式 選擇符中有乙個id,就在i的位置加1 選擇符中有乙個類,就在c的位置加1 選擇符中有乙個標籤名 元素名 就在e的位置加1 得到乙個三位數 body p largetext ul.mylist li 1 1 4特指度 114查理版簡單層疊要點 規則一 包含id的選擇符 包含類的...