CSS疑似クラスを使用する-CSSチュートリアル-php.cn

構文

示例

输出

ホームページ

ウェブフロントエンド

CSSチュートリアル

CSS疑似クラスを使用する

王林

Sep 03, 2023 pm 06:41 PM

特定の状態 (ホバー、アクセス済み、無効など) を持つ要素を選択する CSS 疑似クラスを使用して、HTML 内の既存の要素に特定のスタイルを追加できます。

注 strong> - CSS 疑似クラスを疑似要素から分離するために、CSS3 では疑似クラスに単一コロン表記を使用します。

構文

以下は要素で CSS 疑似クラスを使用するための構文です-

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

ログイン後にコピー

以下はすべて利用可能な CSS 疑似クラスです-

##1##2Checked3< td style="text-align: center;">無効にするenabledfirst-childfirst-of-type Focusフォーカスのある上記の要素を選択しますhover指定された範囲内の値を持つ言及された要素を選択します無効な値を持つすべての言及された要素が選択されます親として選択した最後の子親によって最後に言及されたすべての要素を選択します未訪問のメンション要素をすべて選択します ##1718#19nth-last -oftype(n )nth-of-type(n)only-of-typeonly-child 言及された各要素をその親の唯一の子要素として選択します #オプション値が指定された範囲外にある前述の要素を選択します言及された要素の指定された属性を選択するために「readonly」を使用します「readonly」なしで上記の要素を選択します。 attribute「required」属性を持つ言及された要素を選択します指定されたドキュメントのルート要素を選択しますit 現在言及されているアクティブな要素を選択します (アンカー名を含む URL をクリックします) )

Sr.No	疑似クラスと説明
	アクティビティアクティビティによって言及された要素を選択します
	チェックされたすべての言及された要素を選択します
It無効にされたすべての言及された要素を選択します #4
empty	それは選択されます。言及された各要素には何もありませんChildren ##5
	有効化された各要素が選択されます 6
	親の最初の子である言及された各要素が選択されます 7
	これは、各要素の最初に言及された要素を選択します。親 ##8
	#9
マウスオーバーで言及された要素を選択します	#10 スコープ内
	#11 無効
	12 lang (Language )
lang 属性値が「 language 」で始まる、言及されたすべての要素を選択します	13 last-child
	## 14 last-of -type
	15 リンク
	16 #not(selector) ##言及されていないすべての要素を選択します
	nth-child(n ) 親の n 番目の子である言及された各要素を選択します
	nth-last-child(n) n 番目の子を親レベルとして選択します言及された各要素について、最後の子から数えて
	言及された各要素、つまり、最後の子要素から数えて、親内の n 番目に言及された要素を選択します ##20
	親要素の n 番目にある、言及された各要素を選択します。言及された要素 21
	は、親要素に記載されている各要素の唯一の言及として選択されます。 #22
	#23
「必須」属性なしで上記の要素を選択します	##24 範囲外です
	< /p>25 読み取り専用
	#26 read-write
	27 required
	#28 root
	29 target
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>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>

ログイン後にコピー