使用 CSS 偽類-css教學-PHP中文網

首頁

web前端

css教學

使用 CSS 偽類

王林

Sep 03, 2023 pm 06:41 PM

我們可以使用CSS 偽類別為HTML 中的現有元素新增特定樣式，這些偽類別選擇具有特定狀態的元素，例如（懸停、存取、停用等）

注意 strong> - 為了將CSS 偽類與偽元素分開，在CSS3 中，偽類使用單冒號表示法。

語法

以下是在元素上使用CSS 偽類別的語法-

Selector:pseudo-class {
   css-property: /*value*/;
}

以下是所有可用的CSS 偽類別-

34#它選擇每個提到的元素沒有子級#已啟用它選擇每個啟用的提到的元素first-child它選擇作為其父級的第一個子級的每個提到的元素first-of-type 它選擇第一個提到的每個元素其父級元素 ##焦點滑鼠懸停時選擇提到的元素它選擇指定範圍內值的提及元素#它選擇所有提到的元素均具有無效值它選擇每個提到的元素，其lang 屬性值以「語言」開頭它選擇作為其父級的最後一個子層級它選擇其父元素最後提到的每個元素它選擇所有未造訪的提及元素它選擇所有不是的元素所提到的元素它選擇作為其父級的第n 個子級的每個提到的元素它選擇作為其父級的第n 個子級的每個提到的元素，從最後一個孩子開始計算它選擇每個提到的元素，即其父元素中第n 個提到的元素，從最後一個子元素開始計算它選擇每個提到的元素是其父元素中第n 個提到的元素##它選擇作為其父元素唯一提及的每個提到的元素#它選擇作為唯一子元素的每個提到的元素其父級它選擇沒有「required」屬性的上述元素它選擇值超出指定範圍的提到的元素它使用「readonly」選擇提到的元素指定屬性29 tr>

Sr.No	偽類別與描述
1	活動它選擇活動提到的元素
#2	已檢查 #它選擇每個已檢查提到的元素
##停用它選擇每個禁用提到的元素 td>
	4
	5
	6
	#7
	#8
它選擇具有焦點的上述元素 td>	#9 ##懸停
	#10 在範圍內
	#11 無效
	#12 lang （語言)
	13 last-child
	14 last-of -type
	15 連結
	16 not(selector)
	17 nth-child(n )
	18 nth-last-child(n)
	#19 nth-last -oftype(n )
	20 nth-of-type(n)
	21 only-of-type
	22 only-child
	#23 ##可選
td>	#24 超出範圍
	#25 只讀
	#26##讀寫它選擇沒有「readonly」屬性的上述元素
	#27 required 它選擇指定了「required」屬性的提到元素
	#28##root 它選擇文件的根元素
	##目標它選擇目前提到的活動元素（點擊包含該錨點名稱的URL）
30	有效它选择具有有效值的所有提到的元素
31	访问过它选择所有访问过的提到的元素

示例

让我们看一个 CSS 伪类的示例 -

现场演示

<!DOCTYPE html>
<html>
<head>
<title>CSS Anchor Pseudo Classes</title>
</head>
<style>
div {
   color: #000;
   padding:20px;
   background-image: linear-gradient(135deg, grey 0%, white 100%);
   text-align: center;
}
.anchor {
   color: #FF8A00;
}
.anchor:last-child {
   color: #03A9F4;
}
.anchor:visited {
   color: #FEDC11;
}
.anchor:hover {
   color: #C303C3;
}
.anchor:active {
   color: #4CAF50;
}
</style>
<body>
<div>
<h1 id="Search-Engines">Search Engines</h1>
<a class="anchor" href="https://www.google.com" target="_blank">Go To Google</a>
<a class="anchor" href="https://www.bing.com" target="_blank">Go To Bing</a>
</div>
</body>
</html>

输出

这将产生以下输出 -

使用 CSS 伪类

示例

让我们看一下 CSS 伪类的另一个示例 -

现场演示

<!DOCTYPE html>
<html>
<head>
<title>CSS Pseudo Classes</title>
<style>
form {
   width:70%;
   margin: 0 auto;
   text-align: center;
}
* {
   padding: 2px;
   margin:5px;
   box-sizing: border-box;
}
.child{
   display: inline-block;
   height: 40px;
   width: 40px;
   color: white;
   border: 4px solid black;
}
.child:nth-of-type(1){
   background-color: #FF8A00;
}
.child:nth-of-type(2){
   background-color: #F44336;
}
.child:nth-of-type(3){
   background-color: #C303C3;
}
.child:nth-of-type(4){
   background-color: #4CAF50;
}
.child:nth-of-type(5){
   background-color: #03A9F4;
}
.child:nth-of-type(6){
   background-color: #FEDC11;
}
.child:hover{
   background-color: #000;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>CSS-Pseudo-Classes</legend>
<div id="container">
<div class="child"></div><div class="child"></div><div class="child"></div><div class="child"></div><div class="child"></div><div class="child"></div>
</div><br>
</body>
</html>