屬性選擇器1doctype html
>
2<
html
lang
="en"
>
3<
head
>
4<
meta
charset
="utf-8"
>
5<
title
>屬性選擇器
title
>
6<
style
>7/*
屬性匹配*/8
label[for]
12/*
屬性名匹配
*/13
label[for='pwd']
17/*
以什麼結尾匹配
*/18
label[for$='3']
22/*
以什麼開頭匹配
*/23
label[for^='7']
27/*
屬性名中有什麼匹配
*/28
label[for*='ser']
31style
>
32head
>
33<
body
>
3435
<
div>
3637
<
div
class
="box"
>
3839
<
form
action
="">
40<
label
for="user"
>使用者名稱
label
>
41<
input
type
="text"
id="user"
>
42<
label
for="pwd"
>密碼：
label
>
43<
label
for="vip"
>vip
label
>
44<
label
for="vip1"
>vip1
label
>
45<
label
for="7vip2"
>vip2
label
>
46<
label
for="vip3"
>vip3
label
>
47<
label
for="user1"
>使用者名稱1
label
>
48<
label
for="user2"
>使用者名稱2
label
>
49<
label
for="user3"
>使用者名稱3
label
>
50form
>
51div
>
52div
>
53body
>
54html
>
偽類選擇器1doctype html
>
2<
html
lang
="en"
>
3<
head
>
4<
meta
charset
="utf-8"
>
5<
title
>偽類選擇器
title
>
6<
style
>78
/*沒有被訪問的標籤樣式*/9
.box ul li.item1 a:link
12/*
訪問過的標籤樣式
*/13
.box ul li.item2 a:visited
16/*
滑鼠懸停時的標籤樣式
*/17
.box ul li.item3 a:hover
20/*
滑鼠點住時的樣式
*/21
.box ul li.item4 a:active
24/*
選中第乙個元素
*/25
div ul li:first-child
28/*
選中最後乙個元素
*/29
div ul li:last-child
32/*
選中括號裡的第幾個元素 數值是n的話表示選中所有，n是從0開始的，0的時候表示沒有選中 2n選中偶數 2n-1選奇數
*/33
div ul li:nth-child(3)
36/*
隔行換色 n前面的數值表示隔幾減一行換色
*/37
div ul li:nth-child(4n+1)
40style
>
41head
>
42<
body
>
43<
div
class
="box"
>
44<
ul>
45<
li class
="item1"
>461
47<
a href
="#"
>張三
a>
48li
>
49<
li class
="item2"
>502
51<
a href
="#"
>李四
a>
52li
>
53<
li class
="item3"
>543
55<
a href
="#"
>王八
a>
56li
>
57<
li class
="item4"
>584
59<
a href
="#"
>王八單
a>
60li
>
61ul
>
62div
>
63body
>
64html
>
偽元素選擇器1doctype html
>
2<
html
lang
="en"
>
3<
head
>
4<
meta
charset
="utf-8"
>
5<
title
>偽元素選擇器
title
>
6<
style
>7/*
設定首字元的樣式*/8
p:first-letter
12/*
在前面加內容(使用不是很頻繁) 對應的還有after(使用非常頻繁) 使用此偽元素選擇器一定要結合content屬性
*/13
p:before
16style
>
17head
>
18<
body
>
1920
<
p>
21我是乙個段落22p
>
23body
>
24html
>
偽元素選擇器 屬性選擇器 兄弟元素選擇器
一 偽元素 使用偽元素來表示元素中的一些特殊位置 常用 1 first letter 為元素中的第乙個位置設定樣式 2 first line 為元素中的第一行位置設定樣式 3 before 為元素最前邊的部分設定樣式 一般before都需要結合屬性content樣式一起使用 通過content可以向...
屬性選擇器 偽類選擇器 層級選擇器
漸進增強 作用範圍 從小到大 先保證最基本的功能 使用者體驗提公升 優雅降級 作用範圍 從大到小 先針對版本較高的裝置進行專案構建，保證使用者體驗的完美 犧牲一些效果，保證最基本的功能 選擇器 選擇符 id class 型別 div span 後代選擇器 偽類選擇器 偽元素選擇 屬性選擇器 e at...
css選擇器 偽類選擇器 屬性選擇器
偽類選擇器 nth of type index index 同型別兄弟元素中的排名 屬性選擇器 attr val attr 屬件名稱 val 屬性值 屬性選擇器 href val 表標屬性的結尾 屬性選擇器 class tap 表示屬的開頭 first child選擇第乙個 元素 nth of ty...