HTML 從零開始的學習過程(9)

2021-10-06 15:15:11 字數 1908 閱讀 8497

css3是css的公升級版本,對比於以前的版本也多了些不同的選擇器。

子元素選擇器

相鄰兄弟元素選擇器

群組選擇器

屬性選擇器

概念:對帶有指定屬性的html元素設定樣式,可以指定元素的某個屬性,也可以同時指定屬性名和屬性值;

語法:元素[屬性attribute];

相容:ie8+、chrome、safari、opera、firefox;

元素[屬性=「屬性值」];

屬性名=屬性值

元素[屬性~=「屬性值」];

屬性名包含屬性值的元素

元素[屬性^=「屬性值」];

屬性名以屬性值開頭的所有的元素

元素[屬性$=「屬性值」];

屬性名以屬性值結尾的所有的元素

元素[屬性*=「屬性值」];

屬性名包含屬性值的所有的元素

元素[屬性|=「屬性值」];

選擇屬性名=屬性值或者以屬性值-開頭的元素

注:

要注意元素[屬性~=「屬性值」]和元素[屬性*=「屬性值」]的區別

<

!doctype html>

"en"

>

"utf-8"

>

屬性選擇器<

/title>

<

!-- 對帶有指定屬性的html元素設定樣式,你可以指定元素的某個屬性,或者你也可以同時同時指定屬性名和屬性值 --

>

"text/css"

>

a[href]

/*屬性名包含屬性值的元素*/

a[class~=

"two"

]/*a[class*="two"]*/

<

/style>

<

/head>

"#">0-

0<

/a>

="one two" href=

"#1"

>0-

1<

/a>

="two three" href=

"#2"

>0-

2<

/a>

"#3"

>0-

3<

/a>

"#4"

>0-

4<

/a>

"#5"

class

="two12"

>0-

5<

/a>

"3#"

class

="twoksa"

>0-

6<

/a>

"4#"

class

="oktwo"

>0-

7<

/a>

"5#"

class

="two-sas"

>0-

8<

/a>

"#-6"

>0-

9<

/a>

<

/body>

<

/html>

效果:

元素[屬性~=「屬性值」],是0-1和0-2會變成紅色;

元素[屬性*=「屬性值」],是0-1,0-2,0-5到0-8都會變成黃色;

偽類選擇器

包含:動態偽類 (錨點偽類,使用者行為偽類),ui元素狀態偽類,css3結構類,否定選擇器,偽元素。

注:type和child的區別

type --指定元素型別;

child–不限制元素型別;

HTML 從零開始的學習過程 1

1.html的概念 html hyper text markup language 超文字標記語言,使用一系列的標籤對文件 圖示以及其他資訊資源進行統一關聯。特點 1.不需要編譯,直接由瀏覽器執行 2.文字檔案 3.檔案字尾名為html 4.對大小寫不敏感。2.html基礎語法部分 基本結構 doc...

HTML 從零開始的學習過程(3)

結構 標題 caption 表頭 th 頭,內容居中顯示,加粗顯示 tr thead 主體 td 表體,預設靠左顯示,不加粗 tr tbody table 腳注 td 表體,預設靠左顯示,不加粗 tr tfoot body 屬性 frame 外部邊框樣式 void,不顯示外側邊框 above,顯示上...

HTML 從零開始的學習過程(5)

概念 css層疊樣式表 cascading style sheets 一種用來表現html或xml的語言。作用 結構與樣式分離的方式,便於後期的維護和修改 可以用多套樣式,使網頁有任意樣式切換的效果 使得頁面載入的更快,降低伺服器的成本。樣式分類 1.內部樣式 utf 8 document titl...