CSS選擇符、僞類、層疊

主題，架子（時間架子，空間架子，三角架），素材。

CSS

三種方式

• 行內樣式
• 嵌入樣式
• 連接樣式

上下文選擇符

祖父 孫

p em {color:red;}

父 子

p > em {color:red;}

緊鄰同胞

h2 + p {color:red;}

通常同胞

h2 ~ a {color:red;}

通用

* {color:red;}

ID 類 選擇符

.class1 {color:red;}

#id1 {color:red;}

屬性選擇符

選擇帶有屬性名的標籤

img[title] {color:red;}

img[title="red"] {color:red;}

僞類

• 連接僞類
  Link 待點擊
  Visited 點擊過
  Hover 懸浮
  Active 正在被點擊

a:link {color:black;}
a:visited {color:gray;}
a:hover {text-decoration:none;}
a:active {color:red;}

一個冒號表示僞類，兩個冒號表示CSS3新增的僞類。

• :focus僞類

input:focus {border:1px solid blue;}

• 結構化僞類

:first-child
:last-child

e:nth-child(n)

n能夠是數字也能夠是odd,even

僞元素

p::first-letter {font-size:300%;}

首字母放大

e::before
e::after

元素先後

繼承

可繼承：顏色，字體，字號。

不可繼承：邊框，外邊距，內邊距。

層疊

層層疊加，用最後一個。

順序以下：
默認樣式
用戶樣式
做者連接樣式（按照連接的前後順序）
做者嵌入樣式
做者行內樣式

特指度高的勝出。

p {font-size:12px;}
.large {font-size:16px;}

I-C-E最大的勝出。

P
p.largetext
p#largetext
body p#largetext
body p#largetext ul.mylist
body p#largetext ul.mylist li
0-0-1
0-1-1
1-0-1
1-0-2
1-1-3
1-1-4
=1
=11
=101
=102
=113
=114

順序決定權重。
最後聲明勝出。

CSS屬性值

文本值 數字值（絕對值，px。相對值，em。） 顏色值