疑似クラスセレクター
疑似クラスセレクターと疑似要素セレクターは、ドキュメント内の非特定の結果のスタイル、または特定の要素（ドキュメント自体を含む）のステータスのスタイルを指定できます。ドキュメントの構造ではなく、特定の条件に基づいてスタイルを適用します。
擬似クラスセレクターの使用は次のとおりです。
HTML标记 伪类名{伪类名：属性值；属性名：属性值；.....}
一般的な擬似クラスを次の表に示します。
| 疑似クラス名 | 説明文 |
|---|---|
| ：リンク | マウスは以前のスタイルを身に着けていませんでした |
| ：visited | 訪問したハイパーリンクのスタイル |
| ：フォーカス | 要素がフォーカスと呼ばれる場合、フォーム要素によく使用されます |
| ：ホバー | マウスが要素上にあり、トリガーまたはクリックされていない場合に使用されます。たとえば、マウスポインターがハイパーリンク上にとどまる場合があります。ホバーはハイパーリンクを示します |
疑似クラスセレクターの使用
例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSDN董小宇伪类的使用</title>
<style>
a:link{/*超链接初始颜色为blue*/
color: blue;
}
a:visited{/*超链接点击一次之后，颜色变为darkslategrey;*/
color: darkslategrey;
}
a:hover{/*鼠标在超链接上时，超链接颜色为yellow*/
color: yellow;
}
a{
font-size: 32px;
}
</style>
</head>
<body>
<div>
<a href="https://blog.csdn.net/lolly1023">CSDN：董小宇</a>
</div>
</body>
</html>
効果は次のとおりです。
青は初期設定の色、黄色はマウスが接続に引っかかっている色です。
疑似クラスの使用手順：
a 疑似クラスの順序はLVHA（：リンク：訪問済み：フォーカス：hover）である必要がありますCSS定義では、a：リンクの後にa：ホバーを配置し、有効にするためにa：訪問する必要がありますはい、CSS定義では、有効にするためには、a：ホバーの後にアクティブを配置する必要があります。
疑似要素セレクター
疑似要素セレクターの使用方法は次のとおりです
。HTMLタグ：疑似要素（属性名：属性値;属性名：属性値; ...）
一般的な疑似要素を次の表に示します。
| 疑似要素名 | 説明文 |
|---|---|
| ：最初の文字 | ブロックレベルの要素に関連付けられたテキストの最初の文字に特別なスタイルを追加する |
| ：一行目 | テキストの最初のフライトに特別なスタイルを追加します |
| ：前 | 要素の前にコンテンツを追加します。デフォルトの疑似要素はインライン要素です |
| ：後 | 要素の後にコンテンツを追加する |
疑似要素の使用
例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSDN董小宇伪元素的使用</title>
<style>
/*第一行的首字母发生变化*/
div::first-letter{/*设置第一段开头第一个字大小为64px*/
font-size: 64px;
}
/*第一行全部修改*/
div::first-line{/*设置第一行的背景色为red*/
background-color: red;
}
/*在文本前面添加内容*/
div::before{/*在开头添加内容，需要使用content才能添加*/
/*添加文本内容*/
content: 'CSDN';
font-style: italic;
}
/*在文本后面添加内容*/
div::after{/*在开头添加内容，需要使用content才能添加*/
content: '董小宇';
color: blue;
}
</style>
</head>
<body>
<div>
伪元素的实例
</div>
</body>
</html>
効果は次のとおりです。
交差点セレクター
- 交差セレクターは2つのセレクターで構成され、その結果、2つのグリッド要素範囲の交差点が選択されます。
- 要件：交差部分の最初のセレクターはタグセレクターで、2番目のセレクターはクラスセレクターまたはIDセレクターである必要があります。
- 2つのセレクターの間にスペースがあってはならず、それらは継続的に書き込まれなければなりません。
交差セレクターの使用
例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSDN董小宇交集选择器的使用</title>
<style>
p.p1{/**使用交集选择器，选中了p标签与类选择器为p1的内容，然后进行修改/
font-size: 32px;
}
</style>
</head>
<body>
<div>
<p class="p1">我使用了交集选择器</p>
<p>我没有使用交集选择器</p>
</div>
</body>
</html>
効果は次のとおりです。
私もプログラミングの初心者ですが、理解に問題がある場合は、読んでからコメントアウトしていただければと思います。
