1. 程式人生 > >(四十一)HTML標簽--2

(四十一)HTML標簽--2

註意 port span 偽類選擇器 style屬性 高級 rst -c 第一個

一、樣式倒入模式

1 行內樣式
在標簽中添加一個style屬性,屬性值寫要設置的樣式
2 內接樣式
添加一個style標簽,在標簽中寫要設置的樣式
3 外界樣式
添加一個link標簽,href中指定要導入的css樣式文件的路徑
css樣式文件中寫樣式
二、基本選擇器
1 標簽選擇器
直接寫標簽名
2 id選擇器
#id
3 class類選擇器
.類名

三、高級選擇器
1 子類選擇器
大於號
選擇的是前一級標簽的子標簽

div>p_pid{ }

2 後代選擇器
空格
選擇的是前一級標簽的後代標簽

.cls p{ }
3 並集選擇器


逗號
選擇所有符合條件的標簽

p,div,a{ }
4 交集選擇器
開頭是標簽名 後邊跟id或類選擇器(註意,沒有空格)
div.cls{ } 或者div#id{ }
5 通用選擇器
* 選擇所有的標簽

6 屬性選擇器
1 [屬性名] 帶這個屬性名的標簽
2 [屬性名=‘要匹配的屬性值‘] 帶有屬性,屬性的名符合匹配要求
3 [屬性名^=‘屬性值的開頭字符串‘]
4 [屬性名$=‘屬性值的結尾字符串‘]
5 [屬性名*=‘屬性值包含的字符串‘]

7 偽類選擇器
a: LoVe HAte
四種狀態: 未被訪問的鏈接 link
訪問過的鏈接

visited
鼠標懸停的樣式 hover
鼠標按下時的樣式 active

選擇第一個孩子:
:first-child=>修改相同元素的第一個。
選擇最後一個孩子:
:last-child=>修改相同元素的最後一個。
選擇指定的孩子:
nth-child(n)=>修改相同元素中指定的那個。

p:first-letter :選擇第一個字符
p:before在標簽前邊添加一個標簽內容=>適用於所有相同元素
p:after在標簽後邊添加一個標簽內容=>適用於所有相同元素

8 繼承性

標簽可以繼承父標簽的樣式: color, font-, text- line-

9 層疊性
(選擇器權重一樣的時候)後邊添加的樣式會覆蓋前邊的樣式

10 權重
id 權重100
權重10
標簽 權重 1
!important 權重無限大

都有!important 的時候,比較權重

(四十一)HTML標簽--2