偽類(偽類選擇器)
偽類:同一個標簽,根據(jù)其不同的種狀態(tài)躬拢,有不同的樣式躲履。這就叫做“偽類”。偽類用冒號來表示聊闯。
比如div是屬于box類工猜,這一點很明確,就是屬于box類菱蔬。但是a屬于什么類篷帅?不明確。因為需要看用戶點擊前是什么狀態(tài)拴泌,點擊后是什么狀態(tài)魏身。所以,就叫做“偽類”蚪腐。
靜態(tài)偽類和動態(tài)偽類
偽類選擇器分為兩種箭昵。
(1)靜態(tài)偽類:只能用于超鏈接的樣式。如下:
-
:link
超鏈接點擊之前 -
:visited
鏈接被訪問過之后
PS:以上兩種樣式回季,只能用于超鏈接宙枷。
(2)動態(tài)偽類:針對所有標簽都適用的樣式掉房。如下:
-
:hover
“懸停”:鼠標放到標簽上的時候 -
:active
“激活”: 鼠標點擊標簽慰丛,但是不松手時卓囚。 -
:focus
是某個標簽獲得焦點時的樣式(比如某個輸入框獲得焦點)
PS:以上三種樣式,只能用于超鏈接诅病。
超鏈接a標簽
超鏈接的四種狀態(tài)
a標簽有4種偽類(即對應四種狀態(tài))哪亿,要求背誦。如下:
-
:link
“鏈接”:超鏈接點擊之前 -
:visited
“訪問過的”:鏈接被訪問過之后 -
:hover
“懸拖桶剩”:鼠標放到標簽上的時候 -
:active
“激活”: 鼠標點擊標簽蝇棉,但是不松手時。
記住芥永,在css中篡殷,這四種狀態(tài)必須按照固定的順序?qū)懀?/strong>
a:link 、a:visited 埋涧、a:hover 板辽、a:active
E:first-child 匹配作為父元素第一個子元素E
選擇屬于其父元素的首個子元素的每個 <p> 元素,并為其設置樣式:
p:first-child
{
background-color:yellow;
}
E:last-child
匹配作為父元素最后一個子元素E
E:only-child
匹配作為父元素的唯一一個子元素E
E:nth-child(n)
匹配作為父元素的第n個子元素E棘催。括號中是一個具體的數(shù)字(還可以這樣用:nth-child(2n+1)表示奇數(shù)項劲弦, nth-child(2n+2)表示偶數(shù)項)
偽元素選擇器
1、::before 和 ::after
- 必須帶一個屬性content
2.在內(nèi)部內(nèi)容的前面或者后面插入內(nèi)容
<div>必須帶一個屬性content</div>
div::before {
content: "我是插入的內(nèi)容";
background: #572eb8;
}
1.1 當插入的內(nèi)容定義寬高和其他屬性時醇坝,其實就是一個盒子(必須通過display轉(zhuǎn)換邑跪,因為默認是一個行內(nèi)元素)。
<body>
<div>盒子1</div>
</body>
div{
width: 500px;
height: 500px;
border: 1px solid #000;
}
div::before{
content: "插入的盒子";
display: block;
width: 200px;
height: 200px;
background: rgb(211, 29, 29);
}