語法

標簽名:偽類名{宣告;}

偽類選擇元素基于的是當前元素處于的狀態，由于狀態是動態變化的，所以一個元素達到一個特定狀態時，它可能得到一個偽類的樣式；當狀態改變時，它又會失去這個樣式，

各種屬性

屬性	描述
:active	向被激活的元素添加樣式
:focus	向擁有鍵盤輸入焦點的元素添加樣式
:hover	當滑鼠懸浮在元素上方時，向元素添加樣式
:link	向未被訪問的鏈接添加樣式
:visited	向已被訪問的鏈接添加樣式
:first-child	向元素的第一個子元素添加樣式
:lang	向帶有指定 lang 屬性的元素添加樣式

樣例

:hover 偽類將應用于有滑鼠指標懸停于其上的元素，

a:hover 
{

color:#B46210;

text-decoration:underline;

}

樣例代碼：

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Title</title>
		<style>
			a {
				text-decoration: none;
			}

			a:hover {
				text-decoration: underline;
				color: red;
			}

			p:hover {
				font-size: 20px;
				font-weight: bold;
			}
		</style>
	</head>
	<body>
		<a href="#">牛哄哄的柯南</a>
		<p>Keafmd</p>
	</body>
</html>

效果截圖：
在這里插入圖片描述

從上面的動圖我們可以很明顯的看出點擊前后的區別，這就是:hover 偽類的作用

其它偽類的使用↓

樣例代碼2：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			a{
			    text-decoration: none;
			}
			a:visited{
			    color:#C8C8C8;
			}
			a:hover{
			    color:#ec7814;
			}
			a:link{
			    color:#C8C8C8;
			}
			
			li:first-child{
			    color:green;
			}
			li:last-child{
			    color:red;
			}
			li:nth-child(3){
			    color:pink;
			}
		</style>
	</head>
	<body>
		<a href="http://www.baidu.com"  >百度</a>
		
		<ul>
		    <li>結構性偽類選擇符 1</li>
		    <li>結構性偽類選擇符 2</li>
		    <li>結構性偽類選擇符 3</li>
		    <li>結構性偽類選擇符 4</li>
		    <li>結構性偽類選擇符 5</li>
		    <li>結構性偽類選擇符 6</li>
		    <li>結構性偽類選擇符 7</li>
		</ul>    
	</body>
</html>

效果截圖：
在這里插入圖片描述

通過這個樣例，我們應該更加清楚了這些偽類的使用

注意

1.在CSS定義中，a:hover 必須被置于 a:link 和 a:visited 之后，才是有效的，
2.在 CSS 定義中，a:active 必須被置于 a:hover 之后，才是有效的，
3.偽類的名稱不區分大小寫，

寫作不易，讀完如果對你有幫助，感謝點贊支持！
如果你是電腦端，看見右下角的“一鍵三連”了嗎，沒錯點它[哈哈]
在這里插入圖片描述
加油！

共同努力！

Keafmd

轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/201670.html

標籤：其他

上一篇：CSS偽類:empty讓我眼前一亮

下一篇：cgb2007-京淘day04