特定の HTML 要素にスタイルを適用するには、まず要素を見つける必要があります。 CSS では、このタスクを実行するためのパフォーマンス ルールは CSS セレクター
CSS3 では、新しい属性セレクター (擬似) が追加されました。 -クラスセレクター、フィルターセレクター。これにより、開発中に HTML のクラス名や ID 名への依存性や HTML 要素への構造的依存性が軽減され、コードの記述がよりシンプルかつ容易になります。
擬似クラス セレクターは、動的擬似クラス セレクター、ターゲット擬似クラス セレクター、言語擬似クラス セレクター、UI 要素ステータス擬似クラス セレクター、構造擬似クラス セレクター、負の擬似クラスセレクター。
| 选择器 | 类型 | 功能描述 |
|---|---|---|
| * | 通配选择器 | 选择文档中所有的HTML元素 |
| E | 元素选择器 | 选择指定的类型的HTML元素 |
| #id | ID选择器 | 选择指定ID属性值为“id”的任意类型元素 |
| .class | 类选择器 | 选择指定class属性值为“class”的任意类型的任意多元素 |
| selector1，selectorN | 群组选择器 | 将每一个选择器匹配的元素合并 |
実践経験
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>使用CSS3基本选择器</title> <style type="text/css"> *{margin:0; padding: 0;} .clearfix:after,.clearfix:before{display: table;content:""} .clearfix:after{clear: both;overflow: hidden} .demo{width: 250px;border: 1px solid #cccccc;padding: 10px;margin: 20px auto;} li{list-style: none outside none; float: left; height: 20px; line-height: 20px;width: 20px;border-radius: 10px; text-align: center;background: #f36; color: white; margin-right: 5px;} </style></head><body> <ul class="clearfix demo"> <li class="first" id="first">1</li> <li class="active">2</li> <li class="important item">2</li> <li class="important">4</li> <li class="item">5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> <li class="last" id="last">10</li> </ul></body></html>
ページの初期効果
ワイルドカード セレクター (*) はすべての要素を選択するために使用されます
*{margin:0;padding:0} //此代码在Reset的样式文件中经常见到，表示所有元素的margin和padding都设置为0コード例
*{margin:0; padding: 0;} .clearfix:after,.clearfix:before{display: table;content:""} .clearfix:after{clear: both;overflow: hidden} .demo{width: 250px;border: 1px solid #cccccc;padding: 10px;margin: 20px auto;} li{list-style: none outside none; float: left; height: 20px; line-height: 20px;width: 20px;border-radius: 10px; text-align: center;background: #f36; color: white; margin-right: 5px;} .demo * {background:orange} //使元素类名为demo下的所有元素都将背景色设置为橙色
ワイルドカード セレクター使用の効果
要素セレクターは CSS にあります 最も基本的なセレクターUL セレクター
*{margin:0; padding: 0;} .clearfix:after,.clearfix:before{display: table;content:""} .clearfix:after{clear: both;overflow: hidden} .demo{width: 250px;border: 1px solid #cccccc;padding: 10px;margin: 20px auto;} li{list-style: none outside none; float: left; height: 20px; line-height: 20px;width: 20px;border-radius: 10px; text-align: center;background: #f36; color: white; margin-right: 5px;} .demo * {background:orange}ul{background:grey}//列表ul的背景色将变成灰色
を使用してリスト全体の背景色を変更します。 要素セレクター
を使用する効果ID セレクター (#id) を使用して、対応する要素を見つけるには、id 属性を設定し、その値を HTML ドキュメント内の対応する要素に設定する必要があります。 ID セレクターは一意です。
*{margin:0; padding: 0;} .clearfix:after,.clearfix:before{display: table;content:""} .clearfix:after{clear: both;overflow: hidden} .demo{width: 250px;border: 1px solid #cccccc;padding: 10px;margin: 20px auto;} li{list-style: none outside none; float: left; height: 20px; line-height: 20px;width: 20px;border-radius: 10px; text-align: center;background: #f36; color: white; margin-right: 5px;} .demo * {background:orange}ul{background:grey}#first {background:lime;color:#000}#last {background:#000;color:lime}
ID セレクターを使用する効果
クラス セレクター (.class) は、ドキュメント要素から独立しています。要素のスタイルを指定します。 ID セレクターとの最大の違いは次のとおりです。クラス セレクターは 1 ページ内に複数の同一のクラス名を持つことができますが、ID セレクターの ID 値はページ全体で唯一の ID 値です
*{margin:0; padding: 0;} .clearfix:after,.clearfix:before{display: table;content:""} .clearfix:after{clear: both;overflow: hidden} .demo{width: 250px;border: 1px solid #cccccc;padding: 10px;margin: 20px auto;} li{list-style: none outside none; float: left; height: 20px; line-height: 20px;width: 20px;border-radius: 10px; text-align: center;background: #f36; color: white; margin-right: 5px;} .demo * {background:orange}ul{background:grey}#first {background:lime;color:#000}#last {background:#000;color:lime}.item {background:green;color:#fff;font-weight:bold}//设置背景为绿色，并且加粗文字
クラスセレクターを使用した場合の効果
コードの後にもう 1 行追加した場合
.item.important{background:red;}//列表3同时具有important和item类名，所以才会执行代码
複数のクラス名セレクターを使用した場合の効果
グループ セレクター (selector1、selectorN) は、同じスタイルの要素を ( ,) で区切ってグループ化します。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
