CSSセレクター

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:lang(fr) 特別な言語を使用して E 要素と一致します。ほとんど使用されません

中国語版と英語版の両方に対応しており、使用できます。

リーリー

E:not(s) s セレクターを含まない要素 E と一致します。

リーリー

E:root ドキュメントのルート要素の E 要素と一致します。多くの場合、HTML 要素を指します

リーリー

E:first-child 親要素の最初の子要素 ​​E と一致します。

リーリー

最初の li が一致します。

E:last-child 親要素の最後の子要素 ​​E と一致します。

リーリー

最後の li が一致します

E:一人っ子

リーリー

入力が一致しました。

E:nth-child(n) 親要素の n 番目の子要素 ​​E と一致します。

リーリー

ul の下の最初の li が一致します。

E:nth-last-child(n) 親要素の下から n 番目の子要素 ​​E と一致します。

リーリー

ul の最後から 2 番目の子要素 ​​li が一致します。

E:first-of-type 同じ型の最初の兄弟要素 E と一致します。

リーリー

同じタイプの最初の li が選択されます;

E:last-of-type 同じ型の最後の兄弟要素 E と一致します。

リーリー

同じタイプの最後の li が選択されています;

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;">&lt;</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;">&gt;</span>
    <span style="color: #0000ff;">&lt;</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;">&gt;</span>
    <span style="color: #0000ff;">&lt;</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;">&gt;</span>
    <span style="color: #0000ff;">&lt;</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;">&gt;</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;">&lt;</span><span style="color: #800000;">ul</span><span style="color: #0000ff;">&gt;</span>
    <span style="color: #0000ff;">&lt;</span><span style="color: #800000;">li</span><span style="color: #0000ff;">&gt;&lt;</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;">&gt;</span>导航一<span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">a</span><span style="color: #0000ff;">&gt;&lt;/</span><span style="color: #800000;">li</span><span style="color: #0000ff;">&gt;</span>
    <span style="color: #0000ff;">&lt;</span><span style="color: #800000;">li</span><span style="color: #0000ff;">&gt;&lt;</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;">&gt;</span>导航二<span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">a</span><span style="color: #0000ff;">&gt;&lt;/</span><span style="color: #800000;">li</span><span style="color: #0000ff;">&gt;</span>
    <span style="color: #0000ff;">&lt;</span><span style="color: #800000;">li</span><span style="color: #0000ff;">&gt;&lt;</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;">&gt;</span>导航三<span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">a</span><span style="color: #0000ff;">&gt;&lt;/</span><span style="color: #800000;">li</span><span style="color: #0000ff;">&gt;</span>
<span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">ul</span><span style="color: #0000ff;">&gt;</span>

这个一定要设置路径URL，不是不行。只能使用与锚点，就是本页跳转。

不过可以使用来代表激活状态，以前是需要js实现的。

 

ok~

 

扩展小知识：

接上一篇又补充一些，让我们对css的理解更加深刻。

层叠样式表

层叠是什么意思？为什么这个词如此重要，以至于要出现在它的名称里。

层叠可以简单地理解为冲突的解决方案。

优先级规则可以表述为

行内样式>ID样式>类别样式>标记样式

在复杂的页面中，某一个元素有可能会从很多地方获取样式，例如一个网站的某一级标题整体设置为使用绿色，而对某个特殊栏目

需要使用蓝色，这样在栏目中就需要覆盖通用的样式设置。在很简单的页面中，这样的特殊需求实现起来不会很难，但是如果网站

的结构很复杂，就完全有可能代码变得非常混乱，可能出现无法找到某个元素的样式来自于哪条规则的情况。因此，必须要充分理

解css中“层叠”的原理。

计算冲突样式的优先级是一个比较复杂的过程，并不仅仅是上面这个简单的优先级规则可以完全描述的。但是使用者可以把把握 一个大的

原则，就是“越特殊的样式，优先级越高”行内样式对指定的一个元素产生影响，非常特殊，ID是针对某个元素的，因此它一定比应用于多个

元素的类别样式特殊。特殊性越高的元素，优先级越高。