CSS の疑似クラスセレクターと疑似要素セレクターのコード分析-CSSチュートリアル-php.cn

1. 疑似クラスをリンクします

05_empty.html

ホームページ

ウェブフロントエンド

CSSチュートリアル

CSS の疑似クラスセレクターと疑似要素セレクターのコード分析

不言

Sep 05, 2018 pm 06:00 PM

擬似要素セレクター疑似クラスセレクター

この記事では、CSS の疑似クラスセレクターと疑似要素セレクターについて説明します。必要な方は参考にしてください。

1. 疑似クラスをリンクします

1. 疑似クラスをリンクします

        /*链接伪类*/        注意:link，:visited，:target是作用于链接元素的！        
        :link       表示作为超链接，并指向一个未访问的地址的所有锚        
        :visited    表示作为超链接，并指向一个已访问的地址的所有锚        
        :target     代表一个特殊的元素，它的id是URI的片段标识符

ログイン後にコピー

2. コード例:
01_anchor pseudo-class.html

<head>
        <meta charset="UTF-8">
        <title></title>
        <!--:link：表示作为超链接，并指向一个未访问的地址的所有锚-->
        <style type="text/css">
            a{                text-decoration: none;            }
            a:link{                color: deeppink;            }
            #test:link{                background: pink;            }
        </style>
    </head>
    <body>
        <a href="#">点我点我点我</a>
        <p id="test">我是p啦</p>
    </body>

ログイン後にコピー

02_anchor pseudo-class.html _ターゲット.html

<head>
        <meta charset="UTF-8">
        <title></title>
        <!--:visited：表示作为超链接，并指向一个已访问的地址的所有锚-->
        <style type="text/css">
            a{                text-decoration: none;            }
            a:link{                color: black;            }
            a:visited{                color: pink;            }
        </style>
    </head>
    <body>
        <a href="#">点我点我点我</a>
    </body>

ログイン後にコピー

2. 動的疑似クラス

2. コード例:

<head>
        <meta charset="UTF-8">
        <title></title>
        <!--:target 代表一个特殊的元素，这个元素的id是URI的片段标识符。--> 
        <style type="text/css">
            *{                margin: 0;                padding: 0;            }
            p{                width: 300px;                height: 200px;                line-height: 200px;                background: black;                color: pink;                text-align: center;                display: none;            }
            :target{                display: block;            }
        </style>
    </head>
    <body>
        <a href="#p1">p1</a>
        <a href="#p2">p2</a>
        <a href="#p3">p3</a>
        <p id="p1">
            p1        </p>
        <p id="p2">
            p2        </p>
        <p id="p3">
            p3        </p>
    </body>

ログイン後にコピー

3. プライバシーと:visited セレクター

rrreええ

4. フォーム関連の疑似クラス

1. フォーム関連の疑似クラス

        /*动态伪类*/        注意:hover，:active基本可以作用于所有的元素！        
        :hover      表示悬浮到元素上        
        :active     表示匹配被用户激活的元素（点击按住时）
注意：
由于a标签的:link和:visited可以覆盖了所有a标签的状态，所以当:link，:visited，:hover，:active同时出现在a标签身上时 :link和:visited不能放在最后！！！

ログイン後にコピー

2. コード例:

01_form status.html

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            #test:hover{                color: pink;            }
            #test:active{                color: red;            }
        </style>
    </head>
    <body>
        <p id="test">
            我是test        </p>
    </body>

ログイン後にコピー

02_form status.html

/*隐私与:visited选择器*/只有下列的属性才能被应用到已访问链接
：    color  background-color  border-color

ログイン後にコピー

03_ フォーカスを取得します。 html

    /*表单相关伪类*/
    :enabled    匹配可编辑的表单    
    :disable    匹配被禁用的表单    
    :checked    匹配被选中的表单    
    :focus      匹配获焦的表单

ログイン後にコピー

04_Simulate radio button.html

<head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>无标题文档</title>
        <style>
            input {                width: 100px;                height: 30px;                color: #000;            }

            input:enabled {                color: red;            }

            input:disabled {                color: blue;            }
        </style>
    </head>

    <body>
        <input type="text" value="晓飞张" />
        <input type="text" value="晓飞张" disabled="disabled" />
    </body>

ログイン後にコピー

4. 構造疑似クラス

2. コード例:

<head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>无标题文档</title>
        <style>
            input:checked {                width: 100px;                height: 100px;            }
        </style>
    </head>

    <body>
        <input type="checkbox" />
    </body>

ログイン後にコピー

04_not.html

rrreええ

05_empty.html

<head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            input:focus{                background: pink;            }
            p:focus{                background: pink;            }

        </style>
    </head>
    <body>
        <input type="text"  value="" />
        <p style="width: 200px;height: 200px;background: deeppink;" contenteditable="true" ></p>
    </body>

ログイン後にコピー

5. 疑似要素

1. 疑似要素

<head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>无标题文档</title>
        <style>
            label {                float: left;                margin: 0 5px;                overflow: hidden;                position: relative;            }

            label input {                position: absolute;                left: -50px;                top: -50px;            }

            span {                float: left;                width: 50px;                height: 50px;                border: 3px solid #000;            }

            input:checked~span {                background: red;            }
        </style>
    </head>

    <body>
        <label>
        <input type="radio" name="tab" />
        <span></span>
    </label>
        <label>
        <input type="radio" name="tab" />
        <span></span>
    </label>
        <label>
        <input type="radio" name="tab" />
        <span></span>
    </label>
    </body>

ログイン後にコピー

2. コード例:

after.html

/*结构性伪类*/index的值从1开始计数！！！！
index可以为变量n(只能是n)
index可以为even odd    #wrap ele:nth-child(index)      表示匹配#wrap中第index的子元素 这个子元素必须是ele    #wrap ele:nth-of-type(index)    表示匹配#wrap中第index的ele子元素
    除此之外:nth-child和:nth-of-type有一个很重要的区别！！
            nth-of-type以元素为中心！！！

:nth-child(index)系列         
    :first-child
    :last-child
    :nth-last-child(index)
    :only-child (相当于:first-child:last-child 或者 :nth-child(1):nth-last-child(1))
:nth-of-type(index)系列
    :first-of-type
    :last-of-type
    :nth-last-type(index)
    :only-of-type   (相当于:first-of-type:last-of-type 或者 :nth-of-type(1):nth-last-of-type(1))

:not        :empty(内容必须是空的，有空格都不行，有attr没关系)

ログイン後にコピー

before.html

<head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">

            /*子元素的标签应该要统一*/
            /*ul .item:nth-child(3){
                border: 1px solid;
            }*/


            ul .item:nth-of-type(3){                border: 1px solid;            }
            /*ul p:nth-of-type(3){
                border: 1px solid;
            }
            ul p:nth-of-type(3){
                border: 1px solid;
            }
            ul li:nth-of-type(3){
                border: 1px solid;
            }*/
        </style>
    </head>
    <body>
        <ul>
            <p class="item">p1</p>
            <p class="item">p2</p>
            <p class="item">p3</p>
            <li class="item">1</li>
            <li class="item">2</li>
            <li class="item">3</li>
            <li class="item">4</li>
            <li class="item">5</li>
            <p class="item">p1</p>
            <p class="item">p2</p>
            <p class="item">p3</p>
            <li class="item">6</li>
            <li class="item">7</li>
            <li class="item">8</li>
            <li class="item">9</li>
        </ul>
    </body>

ログイン後にコピー

firstLetter.html

<head>
        <meta charset="UTF-8">
        <title>not</title>
        <style type="text/css">
            * {                margin: 0;                padding: 0;                border: none;            }

            a {                text-decoration: none;                color: #333;                font-size: 14px;                display: block;                float: left;                width: 100px;                height: 30px;            }

            p {                width: 800px;                margin: 0 auto;            }

            p>a:not(:last-of-type) {                border-right: 1px solid red;            }
        </style>
    </head>

    <body>
        <p>
            <a href="#">first</a>
            <a href="#">second</a>
            <a href="#">third</a>
            <a href="#">fourth</a>
            <a href="#">fifth</a>
        </p>
    </body>

ログイン後にコピー

firstLine.html りー

selection.html

<head>
        <meta charset="UTF-8">
        <title>empty</title>
        <style type="text/css">
            p {                height: 200px;                background: #abcdef;            }

            p:empty {                background: #f00;            }
        </style>
    </head>

    <body>
        <p></p>
        <p>Second</p>
        <p></p>
        <p>Third</p>
    </body>

ログイン後にコピー

関連する推奨事項:
CSS での疑似クラス、疑似要素、および隣接要素セレクターの使用に関するヒント

CSS の例でのセレクタータイプの概要と効率の比較

以上がCSS の疑似クラスセレクターと疑似要素セレクターのコード分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

ホットツール

ホットトピック

Gmailメールのログイン入り口はどこですか？

7569

CakePHP チュートリアル

1386

Steamのアカウント名の形式は何ですか

Win11 Activation Key Permanent

NYTの接続はヒントと回答です

107

Related knowledge

CSSでのホバーとはどういう意味ですか Feb 22, 2024 pm 01:24 PM

CSS の :hover は、ユーザーが特定の要素の上にマウスを移動したときに特定のスタイルを適用するために使用される疑似クラスセレクターです。マウスを要素の上に置くと、:hover を使用して要素にさまざまなスタイルを追加し、ユーザーエクスペリエンスとインタラクションを強化できます。この記事では、ホバーの意味について詳しく説明し、具体的なコード例を示します。まず、CSS における :hover の基本的な使い方を理解しましょう。 CSS では、セレクターを使用して :hover 効果を適用する要素を選択し、その後に追加できます。

CSSでliタグの前のドットを削除する方法 Apr 28, 2024 pm 12:36 PM

CSS の li タグからドットを削除するには 2 つの方法があります: 1. "list-style-type: none;" スタイルを使用します。 2. 透明な画像と "list-style-image: url("transparent.png") を使用します。 ; "スタイル。どちらのメソッドでも、すべての li タグのドットを削除できます。特定の li タグのドットのみを削除したい場合は、疑似クラスセレクターを使用できます。

HTMLにおけるホバーの役割 Feb 20, 2024 am 08:58 AM

HTML におけるホバーの役割と具体的なコード例 Web 開発では、ホバーとは、ユーザーが要素の上にカーソルを置いたときにいくつかのアクションや効果をトリガーすることを指します。これは、CSS :hover 疑似クラスを通じて実装されます。この記事ではホバーの役割と具体的なコード例を紹介します。まず、hover を使用すると、ユーザーが要素上にマウスを移動したときに要素のスタイルを変更できます。たとえば、ボタンの上にマウスを置くと、ボタンの背景色やテキストの色を変更して、次に何をすべきかをユーザーに思い出させることができます。

CSS で :: は何を意味しますか Apr 28, 2024 pm 03:45 PM

CSS の :: 擬似クラスセレクターは、要素の特別な状態または動作を指定するために使用され、擬似クラスセレクター : よりも具体的であり、要素の特定の属性または状態を選択できます。

使用方法:nth-child(-n+5) 擬似クラスセレクターを使用して、位置が 5 以下の子要素の CSS スタイルを選択します。 Nov 20, 2023 am 11:52 AM

使用方法:nth-child(-n+5) 擬似クラスセレクターを使用して、位置が 5 以下の子要素の CSS スタイルを選択します。CSS では、擬似クラスセレクターは、次のことができる強力なツールです。特定の選択方法によって選択された HTML ドキュメント内の特定の要素。その中でも、:nth-child() は、特定の位置にある子要素を選択できる疑似クラスセレクターとしてよく使用されます。 :nth-child(n) は HTML の n 番目の子要素と一致し、:nth-child(-n) は一致します。

CSS での content プロパティの使用 Feb 19, 2024 am 10:56 AM

CSS での content 属性の使用 CSS の content 属性は、疑似クラスに追加のコンテンツを挿入するために使用される非常に便利な属性です。 content 属性は通常、疑似クラスセレクター (::before や ::after など) でのみ使用でき、テキストや画像などのコンテンツを挿入するために使用できます。 content 属性を使用すると、非常に優れた効果を実現できます。次に、content 属性の使用例と具体的なコード例を示します。

CSSでホバーを使う方法 Feb 23, 2024 pm 12:06 PM

CSS の hover 疑似クラスは、マウスが要素上にあるときに要素のスタイルを変更できるようにする非常に一般的に使用されるセレクターです。この記事では、ホバーの使い方を紹介し、具体的なコード例を示します。 1. 基本的な使用法 hover を使用するには、まず要素のスタイルを定義し、次に :hover 疑似クラスを使用して、マウスがホバーしているときに対応するスタイルを指定する必要があります。たとえば、ボタン要素があるとすると、ボタンの上にマウスを置くと、ボタンの背景色が赤に、テキストの色が白に変わります。

:nth-last-child(2) 擬似クラスセレクターを使用して、最後から 2 番目の子要素のスタイルを選択します。 Nov 20, 2023 am 11:22 AM

:nth-last-child(2) 擬似クラスセレクターを使用して、最後から 2 番目の子要素のスタイルを選択します。特定のコード例が必要です。CSS では、擬似クラスセレクターは、選択するために使用できる非常に強力なツールです。ドキュメントツリー、特定の要素。そのうちの 1 つは、:nth-last-child(2) 擬似クラスセレクターで、最後から 2 番目の子要素を選択し、それにスタイルを適用します。まず、この疑似クラスセレクターを使用できるように、サンプル HTML ドキュメントを作成しましょう。による

See all articles

CSS の疑似クラスセレクターと疑似要素セレクターのコード分析

1. 疑似クラスをリンクします

05_empty.html

ホットAIツール

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

人気の記事

ホットツール

メモ帳++7.3.1

SublimeText3 中国語版

ゼンドスタジオ 13.0.1

ドリームウィーバー CS6

SublimeText3 Mac版

ホットトピック

CSS の疑似クラス セレクターと疑似要素セレクターのコード分析

1. 疑似クラスをリンクします

05_empty.html

ホットAIツール

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

人気の記事

ホットツール

メモ帳++7.3.1

SublimeText3 中国語版

ゼンドスタジオ 13.0.1

ドリームウィーバー CS6

SublimeText3 Mac版

ホットトピック

CSS の疑似クラスセレクターと疑似要素セレクターのコード分析