今日內容概要

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

今日內容詳細

組合選擇器

1.兒子選擇器(大於號)
	div>p {}

2.後代選擇器(空格)
	div p {}

3.毗鄰選擇器(加號):同級別緊挨著的下一個
	div+p {}

4.弟弟選擇器(數字1左邊的鍵)
	div~p {}

屬性選擇器

#前提
HTML標籤除了可以有自帶的屬性之外還支援自定義屬性

eg:
<p id='d1' class='c1' name='小明' age=20 xxx=yyy></p>

# 關鍵性的符號就是中括號
[name] {color:red}  
	查詢含有屬性名name的標籤

[name='jason'] {color:red}
	查詢含有屬性名name並且屬性值是jason的標籤

p[name='jason'] {color:red}
	查詢含有書名name並且屬性值是jason的p標籤


 

分組與巢狀

1.分組(逗號隔開 同級別)  
#找p標籤、div標籤、span標籤
    
    p,div,span {
                color:yellowgreen;
            }

2.巢狀(不同的選擇器可以混合使用)  
#找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選擇器  > 類選擇器 > 標籤選擇器

    
"""優先順序也可以打破 需要藉助於關鍵字"""
eg:!important
 

字型屬性相關

1.長寬
width
height

#行內標籤無法設定長寬 完全取決於內部文字

2.字型大小
font-size


2.字型顏色
color:red
color:#xxxxxx
color:RGB(0,0,0)
    
#取色
1.藉助微信/QQ截圖自帶的三基色取色
2.利用瀏覽器自帶的取色器取色

文字屬性

1.文字對齊
text-align:center
    
2.文字裝飾
text-decoration:none
    
3.首行縮排
text-indet:32px

背景屬性

#背景色
#背景圖片

引入方式:
1.background-color:RGB(0,0,0);
2.background-image:url('111.png');

位置方式： 
background-repeat:no-repeat;
background-position:center
    
#如果多個引數都是相同的字首
那麼可以簡寫為background:#xxxxxx url('111.png') no-repeat center;