css擬似セレクター学習擬似クラスセレクター解析

前回の記事「css 擬似セレクターの学習: 擬似要素セレクターの分析」では、擬似要素セレクターについて学習しましたが、今日は擬似クラス セレクターについて詳しく学習します。みんなの役に立ちます。役に立ちます!

擬似クラス セレクター

擬似クラス セレクターは、コードを渡すことを可能にするセレクターのタイプです。これは、HTML 要素の使用状況を特定するための HTML 要素状態情報には含まれません。 疑似クラス セレクター 具体的な使用法は、配置された HTML 要素のステータス情報を表すキーワードを既存のセレクターに追加することです。 [推奨される学習: css ビデオ チュートリアル ]

開発者は、疑似クラスを通じて、ホバー (ホバー)、クリック (アクティブ)、その他の要素の動的な状態を設定できます。最初の子要素 ​​(first-child) や最後の子要素 ​​(last-child) など、セレクターによって選択された要素 (これらの要素には ID またはクラス属性がありません)。

例:hover疑似クラス セレクターを使用すると、ユーザーがボタンの上にマウスを置いたときにボタンの色を変更できます。次のサンプル コードに示すように:

/* 所有用户指针悬停的按钮 */  
 button:hover {  
  color: blue;  
 }

疑似クラスの名前は大文字と小文字が区別されませんが、コロン : で始める必要があります。さらに、疑似クラスは CSS のセレクターと組み合わせて使用​​する必要があります。構文形式は次のとおりです:

选择器:伪类 {  
  属性 : 属性值;  
 }

疑似クラス セレクター の具体的な構文形式は です。 :pseudo-class、ここで : を忘れないでください。

CSS は、次の表に示すように、さまざまな疑似クラスを提供します。

#セレクター例例の説明:activea : activeクリックされたリンクと一致します:checkedinput:checked選択された <input> #:disabled:empty:enabled:first-child##:first-of-typep:first- of-type 親要素の最初の

要素と一致します

:focusinput:focusフォーカスされた <input> 要素と一致します a:hoverinput:in-rangeinput:invalid## に一致します #:lang(言語)p:lang(it)lang 属性値が「it」で始まるすべての

要素と一致します

:last-childp:last-child 親要素の最後の子要素 ​​

と一致します。

は親要素の最後の子要素 ​​

である必要があります:last-of-typep:last-of-type は、最後の

要素

は、すべての未訪問のリンクに一致します

要素ではないすべての要素と一致します

親要素の 2 番目の子要素と一致します

親要素の最後から 2 番目の子要素と一致します

親要素の最後から 2 番目の要素と一致します 子要素

##:nth-of -type(n)p:nth-of-type(2)match 親要素の 2 番目の子要素

:only-of-typep:only-of-type は親と一致します 要素 ##input:optional#:out-of-range input:out-of-range 指定された範囲外の値を持つ <input> 要素と一致します:read-onlyinput :read-only 「readonly」属性を指定する <input> 要素と一致します:read-writeinput:read-write "readonly" 属性のない <input> 要素と一致します。 :requiredinput:required 「必須」属性を指定する要素:root root は、要素のルート要素と一致します。HTML では、ルート要素は常に HTML:target#news:target 現在アクティブな #news 要素と一致します (このアンカー名を含む URL をクリックしました) ) input:valida:visited

input:disabled

無効になっているすべての <input> 要素と一致します

p:empty

子要素を持たない任意の

要素と一致します

input:enabled

有効なすべての <input> 要素と一致します

p:first-child

最初の子要素と一致します親要素内の

、

は親要素内の最初の子要素である必要があります

#:hover

マウスがホバーしている要素と一致します

:in-range

指定された値の範囲で要素を照合します <input> element

:invalid

無効な値を持つすべての <input> 要素

# と一致します。 ##:link

a:link

:not(selector)

:not(p )

:nth-child(n)

p:nth-child( 2)

:nth-last-child(n)

p:nth -last-child(2)

:nth-last-of-type(n)

p:nth-last-of-type(2)

## 内の唯一の

要素#:only-child

p:only-child

は、親要素

:optional# 内の唯一の子要素と一致します

# 「required」属性のない <input> 要素と一致します

#:valid

すべてに一致します 有効な値を持つ <input> 要素

:visited

すべての訪問済みリンクと一致します

擬似クラス セレクターの分類

CSS バージョンは、最初のバージョンから 3 番目のバージョンに進化し、擬似クラス セレクター#を提供しています。 # の数はすでに膨大です。特に、CSS3 バージョンでは、多数の 疑似クラス セレクター が追加されました。

疑似クラス セレクター は非常に多くありますが、疑似クラス セレクター をより適切に分類するために、次の 5 つのタイプに分けることができます。用途:

<li>ユーザー動作擬似クラス: ユーザー動作に関連するいくつかの擬似クラスを指します。たとえば、hover

:hover、press: active そして focus:focus などを取得します。

<li>URL 配置擬似クラス: HTML ページ内の要素を見つけるために使用されます
<li>入力擬似クラス: フォーム コントロールに関連する擬似クラス
<li> 構造擬似クラス: 主にターゲット要素の検索に使用されます。
<li>#論理結合擬似クラス:

などの論理演算に使用されます。 :not( )、特定の要素ではないことを意味します。

1. ユーザー動作擬似クラス - 動的擬似クラス セレクター

動的と呼ばれる理由疑似クラス セレクターは、変化する条件に基づいて要素を照合するため、ドキュメントの固定状態に相対的です。 JavaScript はドキュメントのコンテンツや要素の状態を変更するために広く使用されているため、動的セレクターと静的セレクターの境界はますます曖昧になってきていますが、動的擬似クラス セレクターは依然として特殊なタイプのセレクターです。

: link および :visited セレクター

: リンク セレクターはハイパーリンクと一致し、:visited セレクターはユーザーが訪問したハイパーリンクと一致します。

使用法: 訪問したセレクターをリンク要素に適用できる属性は多くありません。色やフォントは変更できますが、それだけです。

ヒント: 訪問済みセレクターは、ユーザーが自分のページだけでなくすべてのページで訪問した URL を href 属性に持つリンクと一致します。 :visited の最も一般的な使用法は、訪問済みのリンクに特定のスタイルを適用して、訪問していないリンクと区別することです。例えばニュースを見るとき、ホームページの一覧では既読のニュースと未読のニュースのステータスが異なるため、区別しやすくなります。

: ホバー セレクター

: ホバー セレクターは、ユーザーのマウスがホバーしている任意の要素と一致します。

: アクティブ セレクター

: アクティブ セレクターは、ユーザーによって現在アクティブ化されている要素と一致します (通常、要素はマウスによってクリックされます)。

: フォーカス セレクター

: フォーカス セレクターは、フォーカスを受け取った要素と一致し、入力要素によく使用されます。

2. 構造擬似クラス セレクター

構造擬似クラス セレクターを使用して、ドキュメント内の位置に基づいて要素を選択します。このタイプのセレクターには、コロン文字 (:) が接頭辞として付けられます (例: empty)。これらは単独で使用することも、p:empty などの他のセレクターと組み合わせて使用​​することもできます。

構造体擬似クラスセレクター クラスセレクターに含まれる内容は次の表のとおりです。

疑似クラス セレクター Function は、検索に使用されます。兄弟要素のグループ の最初の要素は、兄弟要素のグループ内の最後の要素を見つけるために使用されます。 elements兄弟要素のグループ内の n 番目の要素を見つけるために使用されます兄弟要素のグループ内の n 番目の要素を逆順に見つけるために使用されます 同じ型の兄弟要素のグループ内の最初の要素を見つけるために使用されます同じ型の兄弟要素のグループ内の最後の要素を見つけるために使用されます同じ型の兄弟要素のグループ内の n 番目の要素を見つけるために使用されます 同じ型の兄弟要素のグループの中から逆順で n 番目の要素を検索するために使用されます兄弟要素を持たない要素を検索するために使用されます 同じタイプの兄弟要素を持たない要素を見つけるために使用されます 要素を検索するために使用されます。 子要素もテキスト コンテンツも持たない要素です。 ##selector:root)

CSS中的结构伪类选择器是根据HTML页面中元素之间的关系来定位HTML元素，从而减少对HTML元素的id属性和class属性的依赖。

:first-child与:last-child

:first-child伪类用来定义一组兄弟元素的第一个元素而:last-child伪类则是定位一组兄弟元素的最后一个元素。

如下示例代码展示了:first-child伪类和:last-child伪类的用法：

HTML结构如下：

    <li>涂山红红     <li>涂山苏苏     <li>涂山蓉蓉     <li>涂山雅雅

CSS代码如下：

li:first-child {
    color: red;
}
li:last-child {
    color: blue;
}

代码运行结果如下图所示：

:first-child 伪类可以使用:nth-child(n)伪类改写为:nth-child(1)，而:last-child伪类可以使用:nth-last-child(n)伪类改写为:nth-last-child(1)。

:first-child伪类和:last-child伪类经常会引起误解。例如 li:first-child 是用来定位所有<li>元素中第一个作为子级元素的，而不是定位<li>元素的第一个子级元素。

:first-of-type与:last-of-type

:first-of-type伪类和:last-of-type伪类一个用于定位一组元素中的第一个兄弟元素，一个用来定位最后一个。

如下示例代码展示了:first-of-type伪类和:last-of-type伪类的用法：

HTML结构如下：

<h3>狐妖小红娘</h3>
<p>涂山红红</p>
<p>涂山苏苏</p>

CSS代码如下：

p:first-of-type {
    color: red;
}

p:last-of-type {
    color: blue;
}

代码运行结果如下图所示：

:first-of-type伪类与:last-of-type伪类的用法一定要和:first-child伪类与:last-child伪类的用法区分开。以:first-of-type伪类和:first-child伪类为例来说明：

<li>

:first-of-type伪类是定位一组同类型的兄弟元素中的第一个元素，不管这个元素在兄弟元素中的位置如何。

<li>

:first-child伪类是定位一组兄弟元素中的第一个元素，这些兄弟元素不一定是同类型的。

如果将上述示例代码中的:first-of-type伪类改写为:first-child伪类的话，将不会生效。

:nth-child(n)与:nth-last-child(n)

:nth-child(n)伪类和:nth-last-child(n)伪类都是CSS3中新增的选择器，这两个选择器的用法基本上是一致的。区别在于:nth-last-child(n)伪类是倒序方式定位元素，也就是说，:nth-last-child(n)伪类是从一组元素的结尾开始的。

接下来，主要以:nth-child(n)伪类为例进行讲解。:nth-child(n)伪类中的n参数的含义具有3种情况：

<li>

数字值：任意一个大于 0 的正整数。例如 #example td:nth-child(1) 表示定位ID为example的父元素下所有

selector:first-child

selector:last-child

selector:nth-child(n)

selector:nth-last-child(n)

selector:first-of-type

selector:last-of-type

selector: nth-of-type(n)

selector: nth-last-of-type(n)

selector:only-child

selector:only- of-type

selector:empty

は、HTML ページ要素のルートを見つけるために使用されます (

元素中的第一个元素。<li>

关键字：odd表示奇数，等同于:nth-child(2n)；even表示偶数，等同于:nth-child(2n+1)。

<li>

格式为(an+b)公式：a表示周期的长度（步长 ），n表示计数器（从 0 开始 ），而b则表示偏移值。

如下示例代码展示了:nth-child(n)伪类(实现表格隔行换色效果)的用法：

nbsp;html>



    <meta>
    <meta>
    <meta>
    <title>nth-child伪类</title>
    <style>
        table {
            border-collapse: collapse;
            border-spacing: 0;
            width: 100%;
        }

        th,
        td {
            border-top: 1px solid lightcoral;
            text-align: center;
        }

        /* 最后一行单元格在底部增加一个边框效果 */
        tr:last-child td {
            border-bottom: 1px solid lightcoral;
        }

        /* 实现隔行换色 */
        tr:nth-child(even) {
            background-color: aquamarine;
        }
    </style>



    

                                                                                                                                                                                                                                

姓名	区域
梵云飞	西西域
欢都落兰	南国
石宽	北山
涂山红红	涂山

代码运行结果如下图所示：

:nth-child(n)伪类的n参数用法中比较复杂的是使用(an+b)公式用法，如下示例列举了一些公式用法：

<li>

:nth-child(5n)：定位元素的序号是5 [=5×1]、10 [=5×2]、15 [=5×3]等。

<li>

:nth-child(3n+4)：定位元素的序号是4 [=(3×0)+4]、7 [=(3×1)+4]、10 [=(3×2)+4]、13 [=(3×3)+4] 等。

<li>

:nth-child(-n+3)：定位元素的序号是3 [=-0+3]、2 [=-1+3]、1 [=-2+3]。

:nth-child(n)伪类与:nth-last-child(n)伪类和:nth-of-type(n)伪类与:nth-last-of-type(n)伪类的区别，类似于:first-of-type伪类与:last-of-type伪类和:first-child伪类与:last-child伪类的区别。

:empty

:empty伪类是用来定位没有任何子级元素或文本内容的元素，其中文本内容包含了空白。但是HTML的注释是不影响:empty伪类定位元素的。

如下示例代码展示了:empty伪类的用法：

nbsp;html>



    <meta>
    <meta>
    <meta>
    <title>empty伪类</title>
    <style>
        body {
            /* 开启flex布局 */
            display: flex;
        }

        .box {
            background: pink;
            height: 80px;
            width: 80px;
            margin: 0 20px;
        }

        .box:empty {
            background: lime;
        }
    </style>



    <div></div>
    <div>这个元素的背景是粉色的</div>
    <div>
        <!-- 这是一个注释 -->
    </div>

代码运行结果如下图所示：

:root

CSS中的:root伪类选择器比较简单，它代表的就是元素。

如下代码展示的:root伪类的用法：

:root {
    height: 100vh;
    width: 100vw;
    background-color: dodgerblue;
}

代码运行结果如下图所示：

3、UI元素状态伪类选择器

使用UI伪类选择器可以根据元素的状态匹配元素，下方列表将简单总结这类选择器：

选择器	说明
：enabled	选择启用状态的元素
：disabled	选择禁用状态的元素
：checked	选择被选中的input元素（只用于单选按钮和复选框）
：default	选择默认元素
：valid	根据输入验证选择有效或者无效的input元素
：in-range/：out-of-range	选择在制定范围之内或者职位受限的input元素
：required/：optional	根据是否允许：required属性选择input元素

4、输入伪类选择器

关于表单输入的伪类，主要介绍三种常用的，具体如下：

<li>

:enabled和:disabled

<li>

:read-only和:read-write

<li>

:checked

:enabled和:disabled

:enabled和:disabled一这组伪类选择器分别表示禁用状态与可用状态，这组为了使完全对立的。

:enabled伪类的实际用处并不大，因为大多元素默认都是可用的，所以写不写意义并不大。

如下代码展示了:enabled和:disabled的用法：

nbsp;html>



  <meta>
  <meta>
  <meta>
  <title>:enabled和:disabled的用法</title>
  <style>
    input:enabled {
      outline: none;
    }

    input:disabled {
      /* 禁用状态背景为灰色 */
      background-color: gray;
    }
  </style>



  <input>
  <input>

代码运行结果如下所示：

由上图我们看到禁用状态的<input>的背景颜色为灰色。

:read-only和:read-write

:read-only和:read-write一这组伪类选择器分别表示只读和可写状态，同样的:read-write也很鸡肋，因为默认就是可读写，示例代码如下所示：

nbsp;html>



  <meta>
  <meta>
  <meta>
  <title>:read-only和:read-write</title>
  <style>
    input:read-write {
      outline: none;
    }

    /* 只读状态 */
    input:read-only {
      color: red;
      outline: none;
    }
  </style>



  <input>
  <input>

代码运行结果如下所示：

我们可以看到，只读的<input>的文字颜色为红色。

:checked

:checked伪类可以说是众多伪类选择器中使用频率很高的一个伪类选择器，该选择器表示选中的状态，就比如下面这个例子：

nbsp;html>



  <meta>
  <meta>
  <meta>
  <title>checked伪类</title>
  <style>
    input:checked {
      /* 为选中的增加阴影 */
      box-shadow: 2px 2px 2px 2px lightcoral;
    }
  </style>



  <input>
  <input>

关于:checked伪类，最佳实践是配合<label></label>元素来实现，现在我们就通过:checked和<label></label>元素来实现一个开关的效果。

示例代码如下：

nbsp;html>



  <meta>
  <meta>
  <meta>
  <title>开关</title>
  <style>
    [type="checkbox"] {
      width: 44px;
      height: 26px;
      position: absolute;
      opacity: 0;
      pointer-events: none;
    }

    /* 开关样式 */
    .cs-switch {
      display: inline-block;
      width: 44px;
      height: 26px;
      border: 2px solid;
      border-radius: 26px;
      background-color: currentColor;
      box-sizing: border-box;
      color: silver;
      transition: all .2s;
      cursor: pointer;
    }

    .cs-switch::before {
      content: "";
      display: block;
      width: 22px;
      height: 22px;
      border-radius: 50%;
      background-color: #fff;
      transition: margin-left .2s;
    }


    :checked+.cs-switch {
      color: blueviolet;
    }

    /* 选中移动 */
    :checked+.cs-switch::before {
      margin-left: 18px;
    }

    /* 禁用状态 */
    :disabled+.cs-switch {
      opacity: .4;
      cursor: not-allowed;
    }
  </style>



  <!-- 普通状态 -->
  <input>
  <label></label>
  <!-- 选中状态 -->
  <input>
  <label></label>
  <!-- 禁用状态 -->
  <input>
  <label></label>
  <!-- 选中禁用状态 -->
  <input>
  <label></label>

运行效果如下所示：

5、逻辑组合伪类

:not()否定的伪类

<li>

优先级为0，优先级由括号中的表达式决定； :not(p)由p决定

<li>

可以不断的级联；
input:not(:disabled):not(:read-only) {} ;表示处于不禁用，也不处于只读的状态

<li>

不可出现多个表达式，也不支持选择符；
li:not(li, od); 尚未支持

:not()的巨大的用处在于告别重置的问题；

重置web中的样式，就好比我们在项目中经常使用到的：添加.active类名来控制样式的显示与隐藏/改变样式，往常的写法都是：

.cs_li {
	display: none;
}
.cs_li.active {
	display: block;
}

而我们可以使用:not()伪类，可以更好的实现：

.cs_li:not(.active) {
	display: none;
}

在列表中的设置<li>的边框时也可使用其:not()

.cs_li:not(:nth-of-type(5n)){
	margin-right: 10px; // 除5的倍数项都设置右边的外边距
}

:is()的作用是简化选择器

平时我们开发中经常会用到类似下面的语法：

.cs_li_a > img,
.cs_li_b > img,
.cs_li_c > img {
	display: none;
}

使用:is()简化可写成：

:is(.cs_li_a, .cs_li_b, .cs_li_c) > img {
	display: none;
}

还有一种嵌套之间的关系，相互嵌套，交叉组合得出结论；如下方所示

ol ol li,
ol ul li, 
ul ul li,
ul ol li {
	margin-left: 20px;
}

使用:is()伪类强化，则只需要几行代码：

:is(ol, ul) :is(ol, ul) li{
	margin-left: 20px;
}

<strong>:where()</strong>

:where()与上方的:is()相同，唯一不同的是级别永远为0，也不受括号里面的表达式影响；

使用的方法与:is()完全相同，但优先级永远是0；底下的括号中的优先级完全被忽略，俩句是同一个优先级，并且级别等同于.conten选择器

:where(.article, section) .conten {}
:where(#article, #section) .conten {

（学习视频分享：web前端入门）

以上がcss擬似セレクター学習擬似クラスセレクター解析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。