CSSで疑似クラスと疑似要素を使用する方法-CSSチュートリアル-php.cn

ホームページ

ウェブフロントエンド

CSSチュートリアル

CSSで疑似クラスと疑似要素を使用する方法

清浅

Nov 21, 2018 am 10:31 AM

疑似クラスは、link や hover などのメソッドを通じてセレクターに特殊効果を追加できます。疑似要素は、: first-line を通じて最初の行のスタイルを追加し、: first を通じて最初の文字を追加できます。この 2 つの側面については、後で詳しく説明します。

疑似クラス

特定の部分を選択する方法です。ユーザー介入によって出入りするときの要素の動的な状態は、原則として HTML ドキュメントツリー自体とその要素または属性に属さないことを示します。実際には、CSS 疑似クラスが使用されます。セレクター、および擬似の特殊効果を追加します。さまざまな要素、擬似クラスはセレクターチェーンのどこにでも出現できます。

例

a: リンクは未訪問のリンクを表します

<style>
a:link{
background-color: pink;
}

Image 1.jpg

a: visit は訪問済みのリンクを表します

a:visited{
background-color: pink;
}

Image 7.jpg

a: マウスを移動するとホバーしますリンク時

a:hover{
background-color: pink;
}

Image 1.jpg

#a:hover を有効にするには、a:link と a:visited の後に配置する必要があります。

a: active: 選択されたリンクを示します

a:hover{
background-color: pink;
}
		a:active{
background-color: pink;
}

Image 6.jpg

active を有効にするには、ホバー後に使用する必要があることに注意してください

疑似要素

疑似要素は、特定のセレクターに特殊効果を設定するために使用され、外部およびドキュメントレベルにのみ適用できます。インラインスタイルの代わりに。これらはセレクターチェーンの最後にのみ表示され、各セレクターは 1 つの疑似要素のみを指定できます。単一の要素構造で複数の擬似要素を処理するには、複数のスタイルセレクターまたは宣言ステートメントを作成する必要があります。

: 最初の行の擬似要素

は、テキストの最初の行に特別なスタイルを設定するために使用され、ブロックレベルの要素にのみ使用できます

変更可能次の属性のフォント、色、背景、単語間隔、文字間隔など。

p:first-line 
{
color: pink;
font-variant: small-caps;/*改为大写*/

}
</style>
</head>
<body>
<p>
you are very good!
</p>

は最初の行に適用されます

Image 8.jpg

: 最初の文字の擬似要素

は、テキストの最初の文字に特別なスタイルを設定するために使用されます:

は、フォント、色、背景、マージン、パディング、境界線、およびその他の属性を変更できます。

p:first-letter 
{
color: pink;
font-variant: small-caps;/*改为大写*/

}
</style>
</head>
<body>
<p>
you are very good!

最初の文字にのみ適用されます

Image 9.jpg

要約: 上記がこの記事の全内容です。皆様の学習に役立つことを願っています。

以上がCSSで疑似クラスと疑似要素を使用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明

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

为什么伪元素失效了Nov 21, 2023 pm 05:13 PM

伪元素失效了的原因：1、选择器问题；2、样式冲突；3、继承问题；4、语法错误；5、浏览器兼容性问题等。详细介绍：1、选择器问题，伪元素的选择器可能不正确，导致无法选择到目标元素；2、样式冲突，如果在CSS中存在样式冲突，可能会导致伪元素失效；3、继承问题，伪元素可能无法继承某些样式属性；4、语法错误，如果在CSS中存在语法错误，可能会导致伪元素失效；5、浏览器兼容性问题等等。

使用:nth-child(n+3)伪类选择器选择位置大于等于3的子元素的样式Nov 20, 2023 am 11:20 AM

使用:nth-child(n+3)伪类选择器选择位置大于等于3的子元素的样式，具体代码示例如下：HTML代码：<divid="container"><divclass="item">第一个子元素</div><divclass="item"&

css伪选择器学习之伪类选择器解析Aug 03, 2022 am 11:26 AM

在之前的文章《css伪选择器学习之伪元素选择器解析》中，我们学习了伪元素选择器，而今天我们详细了解一下伪类选择器，希望对大家有所帮助！

实现CSS ::placeholder伪元素选择器的多种应用场景Nov 20, 2023 pm 03:17 PM

实现CSS::placeholder伪元素选择器的多种应用场景，需要具体代码示例在Web开发中，CSS是一种常用的样式表语言，用于控制网页的布局和样式。而::placeholder伪元素选择器则是CSS3新增的一种选择器，用于修改输入框（包括文本输入框、密码输入框等）的占位符样式。下面将为大家介绍多种应用场景，并提供相应的代码示例。修改输入框占位符的颜色：

hover为什么是伪元素Oct 09, 2023 pm 05:45 PM

hover不是伪元素，是伪类。伪类用于选择元素的特定状态或行为，而伪元素则用于在元素的特定部分添加样式。因为:hover用于选择元素的特定状态，而不是在元素的特定部分添加样式，使用:hover伪类可以为元素的鼠标悬停状态添加样式，可以通过:hover伪类为链接添加悬停效果，当鼠标悬停在链接上时，链接的颜色、背景色等可以发生变化。

加上伪元素有什么用Oct 09, 2023 pm 05:45 PM

加上伪元素可以用来创建装饰性的效果、实现特定的布局效果、创建交互效果、修饰特定的元素状态和创建一些特殊效果等。详细介绍：1、创建装饰性的效果，通过设置:before或:after伪元素的内容属性和样式，可以在元素之前或之后插入图标、形状或其他装饰性元素，这样可以为网页添加更多的视觉吸引力和个性化；2、实现特定的布局效果，通过:before和:after伪元素可以创建等等。

使用:active伪类选择器实现鼠标点击效果的CSS样式Nov 20, 2023 am 09:26 AM

使用:active伪类选择器实现鼠标点击效果的CSS样式CSS是一种层叠样式表语言，用于描述网页的表现和样式。:active是CSS中的一个伪类选择器，用于选择元素在鼠标点击时的状态。通过使用:active伪类选择器，我们可以为被点击的元素添加特定的样式，以达到鼠标点击效果的目的。下面是一个简单的示例代码，演示如何使用:active伪类选择器实现鼠标点击效果

伪元素是什么Oct 09, 2023 pm 05:01 PM

伪元素是CSS中的一种特殊选择器，用于在元素的特定位置插入内容，它们被称为“伪元素”，是因为它们不是实际存在于HTML文档中的元素，而是通过CSS来创建的。它可以用来在元素的前面或后面插入内容，或者在元素的内部的特定位置插入内容，通常用于添加装饰性的效果或改变元素的外观。在CSS中，伪元素使用双冒号来表示，而不是单冒号，这是为了与伪类区分开来，伪类使用单冒号表示。

See all articles