ホームページ >ウェブフロントエンド >フロントエンドQ&A >html5/css3に追加される疑似クラスとは

html5/css3に追加される疑似クラスとは

醉折花枝作酒筹オリジナル: 2021-06-02 15:10:572230ブラウズ

新しい疑似クラスは次のとおりです: ":first-child"、":last-child"、":nth-child(n)"、":link"、":visited"、":active 「」、「:hover」、「:focus」、「:not()」など。

このチュートリアルの動作環境: Windows 7 システム、CSS3&&HTML5 バージョン、Dell G3 コンピューター。

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

:first-child 最初の子ノード、:last-child 最後の子ノード、:nth-child(n) n 番目の子ノード、 :nth-last-child(n) 最後から n 番目の子ノード、:only-child 唯一の子ノード

:nth-child(n)、:nth-last-child(n) およびその他特殊な使用法では、括弧内で選択を制限します:

1. 奇数/イベント: 奇数/偶数要素

2. xn y: xn y 要素

早速、コードについて話しましょう。以下は li タグの疑似クラスセレクターを設定するものです。

<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <style type="text/css">
      li:first-child {
        border: 1px solid black;
      }

      li:last-child {
        background-color: #aaa;
      }

      li:nth-child(2) {
        color: #888;
      }

      li:nth-last-child(2) {
        font-weight: bold;
      }

      span:only-child {
        font-size: 30pt;
      }
    </style>
  </head>
  <body>
    <ol>
      <li>oaaaaaaaaaaa</li>
      <li>obbbbbbbbbbb</li>
      <li>occccccccccc</li>
      <li>odddddddddd</li>
      <li>oeeeee</li>
      <li><span id="andorid"></span>saaaaaa啊飒飒</li>
    </ol>
  </body>
</html>

次のことができます。違いを参照してください。 Effect

UI 要素のステータス擬似クラスセレクター

:link (訪問される前の要素 (通常はハイパーリンクのみ))、:visited(訪問された要素 (通常は訪問済みの要素)ハイパーリンクのみ)、:active (アクセスされる要素はマウスのクリックとリリースの間にあります (通常はハイパーリンクのみ))、:hover (マウスホバー状態の要素)、:focus (フォーカスを受け取った要素)

<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <style type="text/css">
      .a {
        font-size: 50px;
      }
      .a:link {
        color: red;
      }
      .a:visited {
        color: grey;
      }
      .a:active {
        color: green;
      }
      .b {
        height: 40px;
        width: 200px;
      }
      .b:focus {
        background-color: blue;
      }
      .c {
        height: 40px;
        width: 60px;
      }
      .c:hover {
        background-color: skyblue;
      }
    </style>
  </head>
  <body>
    <a href="#" class="a">aaa</a>
    <form action="#">
      文本框:<input type="text" name="aaa" class="b" />
      <input type="submit" value="提交" class="c" />
    </form>
  </body>
</html>

#これは次のように始まりました

##ハイパーリンクをクリックしたとき