ホームページ  >  記事  >  ウェブフロントエンド  >  css3の擬似要素とは何ですか?

css3の擬似要素とは何ですか?

青灯夜游
青灯夜游オリジナル
2022-03-15 15:25:343493ブラウズ

css3 疑似要素には次のものが含まれます: 1. 「::after」 (指定された要素の後にコンテンツを挿入できます); 2. 「::before」; 3. 「::first-letter」; 4. " ::first-line"; 5. "::selection"; 6. "::placeholder"。

css3の擬似要素とは何ですか?

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

擬似要素はセレクターの末尾に追加されるキーワードです。擬似要素を使用すると、要素の ID やクラス属性を使用せずに、選択した要素の特定の部分のスタイルを定義できます。たとえば、擬似要素を使用して、段落の最初の文字のスタイルを設定したり、要素の前後にコンテンツを挿入したりできます。

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

selector::pseudo-element {
    property: value;
}

このうち、selectorはセレクター、pseudo-elementは擬似要素の名前、propertyはCSSのプロパティです。 , value は属性に対応する値です。

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

##::beforep::before各

要素の前にコンテンツを挿入します

: :first -letterp::first-letter 各

要素のコンテンツの最初の文字と一致します

#::first -line p::first-line各

要素のコンテンツの最初の行と一致します

::selectionp::selectionユーザーが選択した要素の一部と一致します::placeholderinput::placeholder各フォーム入力ボックス ( など) のプレースホルダー属性と一致します。

1. ::after

伪元素 ::after 能够在指定元素的后面插入一些内容,在 ::after 中需要使用 content 属性来定义要追加的内容,而且在 ::after 中必须定义 content 属性才会生效(没有需要插入的内容时可以将 content 属性的值定义为空"")。

下面通过一个示例来演示伪元素 ::after 的使用:

<!DOCTYPE html>
<html>
<head>
    <style>
        p.one::after {
            content:"";
            display: inline-block;
            width: 50px;
            height: 10px;
            background: blue;
        }
        p.two::after {
            content:"要插入的内容";
            color: red;
            font-size: 6px;
        }
        p.three::after {
            content: url(&#39;./smiley.gif&#39;);
            position: relative;
            top: 8px;
        }
    </style>
</head>
<body>
    <p class="one">伪元素 ::after</p>
    <p class="two">伪元素 ::after</p>
    <p class="three">伪元素 ::after</p>
</body>
</html>

运行结果如下图所示:

css3の擬似要素とは何ですか?

2. ::before

伪元素 ::before 能够在指定元素的前面插入一些内容。与 ::after 相似,::before 中也需要使用 content 属性来定义要追加的内容,而且在 ::before 中必须定义 content 属性才会生效(没有需要插入的内容时可以将 content 属性的值定义为空"")。

下面通过一个示例来演示伪元素 ::before 的使用:

<!DOCTYPE html>
<html>
<head>
    <style>
        p.one::before {
            content:"";
            display: inline-block;
            width: 50px;
            height: 10px;
            background: blue;
        }
        p.two::before {
            content:"要插入的内容";
            color: red;
            font-size: 6px;
        }
        p.three::before {
            content: url(&#39;./smiley.gif&#39;);
            position: relative;
            top: 8px;
        }
    </style>
</head>
<body>
    <p class="one">伪元素 ::before</p>
    <p class="two">伪元素 ::before</p>
    <p class="three">伪元素 ::before</p>
</body>
</html>

运行结果如下图所示:

css3の擬似要素とは何ですか?

3. ::first-letter

伪元素 ::first-letter 用来设置指定元素中内容第一个字符的样式,通常用来配合 font-size 和 float 属性制作首字下沉效果。需要注意的是,伪元素 ::first-letter 仅可以用于块级元素,行内元素想要使用该伪元素,则需要先将其转换为块级元素。

下面通过示例来演示伪元素 ::first-letter 的使用:

<!DOCTYPE html>
<html>
<head>
    <style>
        p::first-letter{
            font-size: 2em;
            color: blue;
        }
    </style>
</head>
<body>
    <p>伪元素 ::first-letter</p>
</body>
</html>

运行结果如下图所示:

css3の擬似要素とは何ですか?

4. ::first-line

伪元素 ::first-line 用来设置指定元素中内容第一行的样式,与 ::first-letter 类似,伪元素 ::first-line 也仅可以用于块级元素,行内元素想要使用该伪元素,则需要先将其转换为块级元素。

下面通过示例来演示伪元素 ::first-line 的使用:

<!DOCTYPE html>
<html>
<head>
    <style>
        p::first-line{
            font-size: 1.5em;
            color: blue;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <p>伪元素 ::first-line 用来设置指定元素中内容第一行的样式,与 ::first-letter 类似,伪元素 ::first-line 也仅可以用于块级元素,行内元素想要使用该伪元素,则需要先将其转换为块级元素。</p>
</body>
</html>

运行结果如下图所示:

css3の擬似要素とは何ですか?

5. ::selection

伪元素 ::selection 用来设置对象被选中时的样式,需要注意的是,伪元素 ::selection 中只能定义元素被选中时的 color、background、cursor、outline 以及 text-shadow(IE11 尚不支持定义该属性)等属性。

下面通过示例来演示伪元素 ::selection 的使用:

<!DOCTYPE html>
<html>
<head>
    <style>
        p::selection{
            color: red;
            background-color: #CCC;
        }
    </style>
</head>
<body>
    <p>伪元素 ::selection 用来设置对象被选中时的样式,需要注意的是,伪元素 ::selection 中只能定义元素被选中时的 color、background、cursor、outline 以及 text-shadow(IE11 尚不支持定义该属性)等属性。 </p>
</body>
</html>

运行结果如下图所示:

css3の擬似要素とは何ですか?

6. ::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>

运行结果如下图所示:

css3の擬似要素とは何ですか?

(学习视频分享:css视频教程web前端

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

要素の後にコンテンツを挿入します

以上がcss3の擬似要素とは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

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