検索

ホームページ >ウェブフロントエンド >CSSチュートリアル >CSS擬似セレクター学習擬似要素セレクター解析

CSS擬似セレクター学習擬似要素セレクター解析

青灯夜游
青灯夜游オリジナル
2022-08-03 10:45:563292ブラウズ

前回の記事『CSSの階層セレクターとは？使い方？ " では、4 種類の階層セレクターについて学びました。疑似セレクターについて話しましょう。擬似セレクターはより複雑な機能を提供しますが、HTML ドキュメントが持つべき要素に直接対応するわけではありません。疑似セレクターには、疑似要素と疑似クラスという 2 つの主なタイプがあります。まず、疑似要素セレクターについて詳しく説明します。 CSS の

CSS擬似セレクター学習擬似要素セレクター解析

#疑似要素セレクター

CSS の疑似要素セレクター は、指定された CSS セレクターにキーワードを追加することです。指定された要素の特定の部分のスタイルを記述するために使用されます。 [推奨学習: css ビデオ チュートリアル ]

開発者は、疑似要素を通じて、要素の ID またはクラス属性を使用せずに、選択した要素の特定の部分のスタイルを定義できます。たとえば、擬似要素を使用して、段落の最初の文字のスタイルを設定したり、要素の前後にコンテンツを挿入したりできます。

CSS1 および CSS2 では、疑似要素の使用方法は疑似クラスと同じであり、コロン : がセレクターに接続されます。ただし、CSS3 では、疑似クラスと疑似要素を区別するために、疑似要素に対する単一コロンの使用が二重コロン :: に変更されました。したがって、疑似要素を使用する場合は、単一コロンではなく二重コロンを使用することをお勧めします。

構文構造は次のとおりです。IE8 と互換性がない限り、

/* CSS3 语法 */
选择器::伪元素 {
  属性 : 属性值;
}
/* CSS2 过时语法 (仅用来支持 IE8) */
选择器:伪元素 {
  属性 : 属性值;
}

では 2 つのコロンを使用する必要があります。

注: セレクター内で使用できる擬似要素は 1 つだけです。擬似要素はセレクターの後に続く必要があります。最新の W3C 仕様によれば、疑似クラスと疑似要素を区別するために、疑似要素を定義するときは単一コロン : ではなく二重コロン :: を使用する必要があります。ただし、古いバージョンの W3C 仕様では特別な区別がなかったので、ほとんどのブラウザは現在、擬似要素を定義するために単一コロンと二重コロンの両方のメソッドをサポートしています。

CSS は、次の表に示すように、一連の擬似要素を提供します。

##::selectionp::selectionユーザーが選択した要素の一部と一致します##::placeholder

::before和::after伪元素

::before 伪元素 的作用是作为定位的HTML元素的第一个子级元素，::after ** 伪元素** 的作用是作为定位的 HTML元素的最后一个子级元素。

如下示例代码展示了::before和::after伪元素的用法：

nbsp;html>



    <meta>
    <meta>
    <meta>
    <title>::before和::after伪元素</title>
    <style>
        p::before {
            content: "♥";
        }

        p::after {
            content: "♥";
        }
    </style>



    <p>这是一段测试内容</p>

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

CSS擬似セレクター学習擬似要素セレクター解析

如上述示例代码所示，::before伪元素和::after伪元素通常会配合content属性来为该元素增加装饰内容。

content属性用于在元素的::before伪元素和::after伪元素中插入内容。该属性具有的值如下所示：

  • none：不会产生伪类元素。

  • normal：::before伪元素和::after伪类元素中会被视为 none。

  • text：文本内容。

  • url：格式为url()，指定一个外部资源（比如图片）。如果该资源或图片不能显示，它就会被忽略或显示一些占位。

::first-letter和::first-line伪元素

::first-letter和::first-line伪元素分别匹配文本的第一个字和第一行的样式内容。示例代码如下：

nbsp;html>



    <meta>
    <meta>
    <meta>
    <title>::first-letter和::first-line伪元素</title>
    <style>
        /* 匹配第一行 */
        p::first-line {
            background-color: lightcoral;
        }

        /* 匹配第一个字 */
        p::first-letter {
            font-size: 130%;
        }
    </style>



    <p>我如果爱你——绝不像攀援的凌霄花，借你的高枝炫耀自己；</p>

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

CSS擬似セレクター学習擬似要素セレクター解析

值得注意的是::first-letter和::first-line伪元素可以使用的CSS属性是有限制的。

::first-letter选择器可以设置的CSS属性：

  • font属性

  • color属性

  • background属性

  • margin属性

  • padding属性

  • border属性

  • text-decoration属性

  • vertical-align属性

  • text-transform属性

  • line-height属性

  • float属性

  • clear属性

::first-line选择器可以设置的CSS属性：

  • font属性

  • color属性

  • background属性

  • word-spacing属性

  • letter-spacing属性

  • text-decoration属性

  • vertical-align属性

  • text-transform属性

  • line-height属性

  • clear属性

::selection伪元素

::selection伪元素的作用是匹配用户在HTML页面选中的文本内容（比如使用鼠标或其他选择设备选中的部分）设置高亮效果。如下示例代码展示了::selection伪元素的用法：

nbsp;html>



    <meta>
    <meta>
    <meta>
    <title>::first-letter和::first-line伪元素</title>
    <style>
        p::selection {
            color: gold;
            background-color: red;
        }
    </style>



    <p>我如果爱你——绝不像攀援的凌霄花，借你的高枝炫耀自己；</p>

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

CSS擬似セレクター学習擬似要素セレクター解析

::placeholder伪元素

伪元素 ::placeholder 用来设置表单元素（、

<!DOCTYPE html>
<html>
<head>
    <style>
        input.text::placeholder{
            color: red;
            background-color: #CCC;
        }
    </style>
</head>
<body>
    <input placeholder="请输入一段文本">未使用伪元素 ::placeholder<br>
    <input placeholder="请输入一段文本" class="text">使用伪元素 ::placeholder 的效果
</body>
</html>

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

CSS擬似セレクター学習擬似要素セレクター解析

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

擬似要素 例 説明の例
::after p::after 各

要素の後にコンテンツを挿入します
::before p::before 各

要素の前にコンテンツを挿入します
::first-letter p::first-letter 各

要素のコンテンツの最初の文字と一致します
: :first-line p::first-line 各

要素のコンテンツの最初の行と一致します
input::placeholder 各フォーム入力ボックス ( など) のプレースホルダー属性と一致します

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

声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：CSS の階層セレクターとは何ですか?使い方？次の記事：CSS の階層セレクターとは何ですか?使い方？

関連記事

続きを見る