組合選擇器偽類選擇器偽元素選擇器選擇器優先順序 html樣式調節

阿新 • • 發佈：2021-08-04

今日內容概要

組合選擇器
偽類選擇器
偽元素選擇器
選擇器優先順序

html樣式調節

今日內容詳細

組合選擇器

1.兒子選擇器（大於號）
	div>p {}
2.後代選擇器（空格）
	div p {}
3.弟弟選擇器（數字1左邊的鍵）
	div~p {}
    """上述的案例使用的都是標籤選擇器 其實也可以切換為任意選擇器"""
    #d1>p{}
    	找id為d1標籤內部所有的兒子p
    .c1 .c2{}
    	找class為c1標籤內部所有class為c2的後代標籤
    div>.c1{}
    	找div標籤內部class為c1的兒子標籤
   	.c+#d1 {}
    	找class為c1標籤同級別緊挨著的id為d1的標籤

屬性選擇器

"""
HTML標籤除了可以有自帶的屬性之外還支援自定義屬性
	<p id='d1' class='c1' name='jason' age=18 xxx=yyy></p>
"""
# 關鍵性的符號就是中括號
[name]{color:red}
	查詢含有屬性名name的標籤
[name='jason']{color:red}
	查詢含有屬性名name並且屬性值是jason的標籤
p[name='jason']{color:red}
	查詢含有書名name並且屬性值是jason的p標籤

分組與巢狀

# 分組（逗號隔開 同級別） 找p標籤、div標籤、span標籤
p，div，span{
    color：yellowgreen；
}
# 巢狀（不同的選擇器可以混著使用）找id=d1、class=c1、div標籤
# d1，.c1,div{
	color:yellowgreen;
}
div.c1 {} # 找class=c1的div標籤

偽類選擇器

# 以連結標籤為例
1.未點選狀態（瞭解）
	a:link{
        color：blue：
    }
2.懸浮狀態（掌握）
	a:hover{
        color：red；
    }
3.點選狀態（不鬆開）（瞭解）
	a:active{
        color：green；
    }
4.點選之後的狀態（瞭解）
	a:visited{
        color：pink
    }
# 以input為例 獲取焦點狀態（聚焦） 
input：focus{}

偽元素選擇器

# 通過css程式碼給html標籤新增文字內容或者修改
# 改變文字第一個字
p：first-letter {
    	font-size：48px；
    	color：red；
}
# 在文字開頭新增內容
p：before{
    	content：'#';
    	color:red;
}
# 在文字末尾新增內容
p：after{
    content：'?';
    color:blue;
}
"""該知識點在浮動中應用（後面講解）"""

選擇器優先順序

1.相同選擇器不同位置
	就近原則（誰離我更近我就聽誰的）
2.不同選擇器不同位置
	行內式（瞭解）>id 選擇器 >類選擇器>標籤選擇器
 """優先順序也可以打破 需要藉助於關鍵字"""
！important（儘量不要使用）

字型屬性相關

1.長寬
width height
# 行內標籤無法設定長寬 完全取決於內部文字
2.字型大小
font-size
3.字型顏色
	第一種： color：red
    第二種： color：#4d4d4d4d
    第三種: color:RGB(128,128,128)
 """
 如何利用常見軟體取色
 	1.qq微信截圖自帶三基色取色
 		RGB(128,128,128)
  	2.利用瀏覽器自帶的取色器取色
  	#4d4d4d4d
 """

字型屬性

1.字型對齊（掌握）
	text-align：center
2.文字裝飾（重要）
	text-decoration：none
3.首行縮排（瞭解）
	text-indet：32px

背景屬性

1.背景色
2.背景圖片
background-color：RGB(255,160,0);
background-image:url('111.png');
background-repeat:no-repeat;
background-position:center;
/*如果多個引數都是相同的字首 那麼可以簡寫*/
background:#336699 url('111.png') no-repeat center center;