検索
ホームページウェブフロントエンドCSSチュートリアル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 までご連絡ください。
あなたが見ている間、CSSグラデーションは良くなりましたあなたが見ている間、CSSグラデーションは良くなりましたApr 11, 2025 am 09:16 AM

Lea verou&#039; conic-gradient()Polyfillの機能のリストに目を向けたことの1つが最後の項目でした。

JavaScriptでRSSフィードを取得して解析する方法JavaScriptでRSSフィードを取得して解析する方法Apr 11, 2025 am 09:15 AM

このようなRSSフィードがあるとします。目標は、RSSにフィードを供給し、解析し、データに役立つことを要求することです。 RSSはXML、XMLはです

CSSのSVGパスのアニメーションCSSのSVGパスのアニメーションApr 11, 2025 am 09:12 AM

たまに、私はSVGのすべての強力な描画構文であるいくつかの形を描画しようとする動機付けでした。私はの断片だけを理解しています

スライドアウトフッタースライドアウトフッターApr 09, 2025 am 11:50 AM

マークアップと呼ばれる魅力的な新しいサイトが起動しました。キャッチフレーズ:Big Techがあなたを見ています。ビッグテクノロジーを見ています。 Upstatementからの素晴らしい仕事。

好きなページ好きなページApr 09, 2025 am 11:47 AM

先日、JavaScriptでRSSフィードを解析することについて投稿しました。また、RSSのセットアップについて、Feedbinがその中心にある方法について話していることについても投稿しました。

Sanity.ioのためにCodepen Gutenberg Embed Blockを再現しますSanity.ioのためにCodepen Gutenberg Embed Blockを再現しますApr 09, 2025 am 11:43 AM

Chris CoyierのWordPressのGutenbergエディターの実装に触発された、Sanity StudioのプレビューでカスタムCodepenブロックを作成する方法を学びます。

CSSでラインチャートを作成する方法CSSでラインチャートを作成する方法Apr 09, 2025 am 11:36 AM

ライン、バー、パイチャートは、ダッシュボードのパンとバターであ​​り、データ視覚化ツールキットの基本的なコンポーネントです。確かに、SVGを使用できます

SASSをプログラミングして、アクセス可能な色の組み合わせを作成しますSASSをプログラミングして、アクセス可能な色の組み合わせを作成しますApr 09, 2025 am 11:30 AM

私たちは常にWebをよりアクセスしやすくしたいと考えています。色のコントラストは単なる数学なので、SASSはデザイナーが見逃したかもしれないエッジケースをカバーするのに役立ちます。

See all articles

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

MantisBT

MantisBT

Mantis は、製品の欠陥追跡を支援するために設計された、導入が簡単な Web ベースの欠陥追跡ツールです。 PHP、MySQL、Web サーバーが必要です。デモおよびホスティング サービスをチェックしてください。

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

強力な PHP 統合開発環境

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

PhpStorm Mac バージョン

PhpStorm Mac バージョン

最新(2018.2.1)のプロフェッショナル向けPHP統合開発ツール

SecLists

SecLists

SecLists は、セキュリティ テスターの究極の相棒です。これは、セキュリティ評価中に頻繁に使用されるさまざまな種類のリストを 1 か所にまとめたものです。 SecLists は、セキュリティ テスターが必要とする可能性のあるすべてのリストを便利に提供することで、セキュリティ テストをより効率的かつ生産的にするのに役立ちます。リストの種類には、ユーザー名、パスワード、URL、ファジング ペイロード、機密データ パターン、Web シェルなどが含まれます。テスターはこのリポジトリを新しいテスト マシンにプルするだけで、必要なあらゆる種類のリストにアクセスできるようになります。