CSS は HTML 構造内の要素を取得できます。これはどのように実現されますか?
私たちの意見では、これはページの外にもページ内にも影響を与えずに CSS を記述できる、とても魔法のようなものです
この要素を取得すると、HTML 構造がどれほど複雑であっても、この CSS は必要な HTML 要素を正確に取得できます。
とても強力なので、実装プロセスも非常に難しいですか?これはとても、とても、とても簡単だとしか言えません。
次のセレクターを覚えておいてください。ああ、前の記事でもいくつかの
セレクター を紹介しました。
サブセレクター
E 要素の子であるすべての要素 F を選択します。 E>F例:
リーリー
隣接セレクター
E要素の直後にあるF要素を選択します。 E+Fリーリー
ブラザーセレクター
要素 E の兄弟要素 F をすべて選択します。え〜ふリーリー
このセレクターの選択には、あなた自身を除くすべての F セレクターが含まれているわけではありません。
IDとクラスセレクター
リーリーID セレクターは、特定の ID でマークされた HTML 要素の特定のスタイルを指定できます。
Web ページ内では、各 ID 名は 1 回のみ使用でき、重複して使用することはできません。
IDとは異なり、クラスは再利用が可能です。たとえば、ページ上の複数の要素はすべて同じスタイル定義を使用できます。
疑似クラスセレクター
E:link は、ハイパーリンクにアクセスする前にそのスタイルを設定します。E:visited は、リンク アドレスが訪問されたときのハイパーリンクのスタイルを設定します。
E:hover は、マウスをホバーしたときの要素のスタイルを設定します。
E:active は、要素がユーザーによってアクティブ化されたとき (マウスのクリックとリリースの間に発生するイベント) のスタイルを設定します。
リーリー
注: これらの 4 つの疑似クラス セレクターの順序は、 link-visited-hover-active に従っています。
順序が間違っていると問題が発生します。この問題を前の拡張コンテンツに移動してください。
E:focus 要素が入力フォーカスになったとき(要素のonfocusイベントが発生したとき)のスタイルを設定します。
カーソルを取得できるフォームまたは要素で使用します。
リーリー
中国語版と英語版の両方に対応しており、使用できます。
リーリー
E:not(s) s セレクターを含まない要素 E と一致します。
リーリー
リーリー
リーリー
最初の li が一致します。
E:last-child 親要素の最後の子要素 E と一致します。
リーリー
最後の li が一致します
E:一人っ子
リーリー
入力が一致しました。
E:nth-child(n) 親要素の n 番目の子要素 E と一致します。リーリー
E:nth-last-child(n) 親要素の下から n 番目の子要素 E と一致します。
リーリー
E:first-of-type 同じ型の最初の兄弟要素 E と一致します。
リーリー
E:last-of-type 同じ型の最後の兄弟要素 E と一致します。
リーリー
E:only-of-type 同じ型の唯一の兄弟要素 E と一致します。
リーリー
E:nth-of-type(n) 同じ型の n 番目の兄弟要素 E と一致します。
第三li被匹配；
E:nth-last-of-type(n) 匹配同类型中的倒数第n个同级兄弟元素E。
<span style="color: #000000;"> li:nth-last-of-type(3){
background: green;
}</span>
倒数第三个被匹配；
E:empty 匹配没有任何子元素（包括text节点）的元素E。
E:checked 匹配用户界面上处于选中状态的元素E。 (用于input type为radio与checkbox时)
<span style="color: #000000;"> input:checked{
width: 100px;
}
</span><span style="color: #0000ff;"><</span><span style="color: #800000;">input </span><span style="color: #ff0000;">type</span><span style="color: #0000ff;">="checkbox"</span><span style="color: #ff0000;"> name</span><span style="color: #0000ff;">="name"</span><span style="color: #ff0000;"> id</span><span style="color: #0000ff;">="1"</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">input </span><span style="color: #ff0000;">type</span><span style="color: #0000ff;">="checkbox"</span><span style="color: #ff0000;"> name</span><span style="color: #0000ff;">="name"</span><span style="color: #ff0000;"> id</span><span style="color: #0000ff;">="2"</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">input </span><span style="color: #ff0000;">type</span><span style="color: #0000ff;">="checkbox"</span><span style="color: #ff0000;"> name</span><span style="color: #0000ff;">="name"</span><span style="color: #ff0000;"> id</span><span style="color: #0000ff;">="3"</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">input </span><span style="color: #ff0000;">type</span><span style="color: #0000ff;">="checkbox"</span><span style="color: #ff0000;"> name</span><span style="color: #0000ff;">="name"</span><span style="color: #ff0000;"> id</span><span style="color: #0000ff;">="4"</span><span style="color: #0000ff;">></span>E:enabled 匹配用户界面上处于可用状态的元素E。
E:disabled 匹配用户界面上处于禁用状态的元素E。
E:target 匹配相关URL指向的E元素。
<span style="color: #000000;">ul li a:target{
color: red;
}
</span><span style="color: #0000ff;"><</span><span style="color: #800000;">ul</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">><</span><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="#nav1"</span><span style="color: #ff0000;"> id</span><span style="color: #0000ff;">="nav1"</span><span style="color: #0000ff;">></span>导航一<span style="color: #0000ff;"></</span><span style="color: #800000;">a</span><span style="color: #0000ff;">></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">><</span><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="#nav2"</span><span style="color: #ff0000;"> id</span><span style="color: #0000ff;">="nav2"</span><span style="color: #0000ff;">></span>导航二<span style="color: #0000ff;"></</span><span style="color: #800000;">a</span><span style="color: #0000ff;">></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">><</span><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="#nav3"</span><span style="color: #ff0000;"> id</span><span style="color: #0000ff;">="nav3"</span><span style="color: #0000ff;">></span>导航三<span style="color: #0000ff;"></</span><span style="color: #800000;">a</span><span style="color: #0000ff;">></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">ul</span><span style="color: #0000ff;">></span>这个一定要设置路径URL，不是不行。只能使用与锚点，就是本页跳转。
不过可以使用来代表激活状态，以前是需要js实现的。
ok~
扩展小知识：
接上一篇又补充一些，让我们对css的理解更加深刻。
层叠样式表
层叠是什么意思？为什么这个词如此重要，以至于要出现在它的名称里。
层叠可以简单地理解为冲突的解决方案。
优先级规则可以表述为
行内样式>ID样式>类别样式>标记样式
在复杂的页面中，某一个元素有可能会从很多地方获取样式，例如一个网站的某一级标题整体设置为使用绿色，而对某个特殊栏目
需要使用蓝色，这样在栏目中就需要覆盖通用的样式设置。在很简单的页面中，这样的特殊需求实现起来不会很难，但是如果网站
的结构很复杂，就完全有可能代码变得非常混乱，可能出现无法找到某个元素的样式来自于哪条规则的情况。因此，必须要充分理
解css中“层叠”的原理。
计算冲突样式的优先级是一个比较复杂的过程，并不仅仅是上面这个简单的优先级规则可以完全描述的。但是使用者可以把把握 一个大的
原则，就是“越特殊的样式，优先级越高”行内样式对指定的一个元素产生影响，非常特殊，ID是针对某个元素的，因此它一定比应用于多个
元素的类别样式特殊。特殊性越高的元素，优先级越高。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
