一、偽類說明 定義:偽類⽤於向某些選擇器添加特殊的效果 超鏈接(a標簽)偽類:a標簽我們在日常工作和學習中用的很多,我們只知道預設狀態下為藍色,但是a標簽其實有四種狀態。 1、未訪問前為藍色(如果a標簽使用不是藍色而是紫色,那麼近期訪問過該網站,需要去瀏覽器刪除近期記錄) a:link 2、滑鼠按著 ...
一、偽類說明
定義:偽類⽤於向某些選擇器添加特殊的效果
超鏈接(a標簽)偽類:a標簽我們在日常工作和學習中用的很多,我們只知道預設狀態下為藍色,但是a標簽其實有四種狀態。
1、未訪問前為藍色(如果a標簽使用不是藍色而是紫色,那麼近期訪問過該網站,需要去瀏覽器刪除近期記錄) a:link
2、滑鼠按著不鬆手時為紅色 a:active
3、訪問後為紫色 a:visited
4、滑鼠移入變化 a:hover
二、元素獲取
定義:偽元素不是真正的元素,不存在與⽂檔之中,所以 js ⽆法對它進行操作。為什麼叫他“元素”?因為我們可以對其進⾏跟元素⼏乎⽆差別的操作
語法: 選擇器:nth-child(){}
三、偽元素
定義:CSS偽元素是⽤來添加⼀些選擇器的特殊效果。最好使⽤雙冒號,防⽌與偽類混淆
1、fist-letter 首字母設置樣式
2、其他偽元素選擇器:
::first-line 首行
::first-letter 首字母
::before 元素前插入
::after 元素後插入
3、before 和 after
根據英文單詞的理解,before在什麼什麼之前、after在什麼什麼之後
before定位的基準是其主元素的右上⻆,after定位的基準是主元素的結尾處。當主元素沒有內容時before與after仍會正常⼯作,屬性為行內元素,若需要設置⾼寬度等屬性需要首先設置為塊元素
content是偽元素必需的屬性。若偽元素沒有內容,需賦值為空格:content:' ';before與after的主要⽤途是對元素預設樣式的的美化:美化時需要結合定位於內容。⼀般講主元素設置為position:relative,偽元素設置為position:absolute,以⽅便對偽元素定位
<style>
p::after{
content: '456';
color: red;
font-size: 30px;
}
p::before{
content: '123';
color: red;
font-size: 30px;
}
</style>
</head>
<body>
<p>韓罪非後非沒儉罪用就罪的活後憾孔派不,幾說才設次德韓奔詞韋聯穿家詞答中小,魂新雷聽自的之是韓而。</p>
</body>