CSS 疑似クラスと疑似要素の使用例-CSSチュートリアル-php.cn

ホームページ

ウェブフロントエンド

CSSチュートリアル

CSS 疑似クラスと疑似要素の使用例

黄舟

Dec 28, 2016 pm 04:20 PM

css 擬似要素疑似クラス

CSS の擬似クラスは、タグのステータスを設定するためによく使用され、擬似要素はタグのスタイルを設定するために使用されます。

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title>css伪类-标签的状态;伪元素</title>  
    <!-- 伪类 可以 被 标签，id，class 指定使用-->  
    <style>  
        /*伪类将应用于未被访问过的链接，与:visited互斥。*/  
        :link {  
            color: red;  
        }  
  
        /*伪类将应用于有鼠标指针悬停于其上的元素。*/  
        a:visited {  
            color: green;  
        }  
  
        /*伪类将应用于被激活的元素，如被点击的链接、被按下的按钮等。*/  
        a:hover {  
            color: blue;  
        }  
  
        /*伪类将应用于被激活的元素，如被点击的链接、被按下的按钮等。*/  
        a:active {  
            color: orange;  
        }  
  
        .inputName:focus {  
            background-color: orange;  
        }  
  
        /*伪元素 第一行*/  
        :first-line {  
  
        }  
  
        /*伪元素 第一个字符*/  
        :first-letter {  
  
        }  
  
        /*伪元素 第一个 子元素（第一个子元素是子元素的span标签*/  
        span:first-child {  
            font-size: 19px;  
            color: brown;  
        }  
  
        /*伪元素 after before,指定 位置 插入 内容 content*/  
        .div1:after {  
            /*after,before特有 属性*/  
            content: "-------";  
        }  
  
    </style>  
</head>  
<body>  
<a href="#">当前网页</a>  
<a href="http://www.baidu.com">百度一下</a>  
<a href="http://itcast.cn">传智播客官网</a>  
<a href="http://www.163.com">网易</a>  
<a href="http://www.sina.com">新浪</a>  
<br>  
<input type="text" class="inputName" value="123">  
<hr>  
<div>  
    <span>111</span>  
    <span>222</span>  
    <span>333</span>  
</div>  
<div class="div1">  
    <span>111</span>  
    <span>222</span>  
    <span>333</span>  
</div>  
  
</body>  
</html>

ログイン後にコピー

上記は CSS 疑似クラスと疑似要素の使用例の内容です。さらに関連する内容については、PHP 中国語 Web サイト (www.php.cn) をご覧ください。

このウェブサイトの声明

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

ホットAIツール

ホットツール

ホットトピック

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

7323

Java チュートリアル

1625

CakePHP チュートリアル

1350

Laravel チュートリアル

1262

PHP チュートリアル

1209

Related knowledge

Vue におけるプレースホルダーの意味 May 07, 2024 am 09:57 AM

Vue.js では、placeholder 属性は、input 要素のプレースホルダーテキストを指定します。これは、ユーザーがコンテンツを入力していないときに表示され、入力のヒントや例を提供し、フォームのアクセシビリティを向上させます。その使用方法は、input 要素にプレースホルダー属性を設定し、CSS を使用して外観をカスタマイズすることです。ベストプラクティスには、入力に関連すること、短く明確にすること、デフォルトのテキストを避けること、アクセシビリティを考慮することが含まれます。

jsでのスパンの意味は何ですか May 06, 2024 am 11:42 AM

スパンタグは、テキストにスタイル、属性、または動作を追加できます。色やフォントサイズなどのスタイルを追加するために使用されます。 idやclassなどの属性を設定します。クリック、ホバーなどの関連する動作。さらに処理または引用するためにテキストにマークを付けます。

jsでレムは何を意味しますか May 06, 2024 am 11:30 AM

CSS の REM は、ルート要素 (html) のフォントサイズに対する相対単位です。次の特性があります: ルート要素のフォントサイズに相対し、親要素の影響を受けません。ルート要素のフォントサイズが変更されると、REM を使用する要素もそれに応じて調整されます。任意の CSS プロパティとともに使用できます。 REM を使用する利点は次のとおりです。応答性: さまざまなデバイスや画面サイズでもテキストを読みやすい状態に保ちます。一貫性: Web サイト全体でフォントサイズが一貫していることを確認します。スケーラビリティ: ルート要素のフォントサイズを調整することで、グローバルフォントサイズを簡単に変更できます。

vueに画像を導入する方法 May 02, 2024 pm 10:48 PM

Vue に画像を導入するには、URL、require 関数、静的ファイル、v-bind ディレクティブ、CSS 背景画像の 5 つの方法があります。動的画像は Vue の計算プロパティまたはリスナーで処理でき、バンドルされたツールを使用して画像の読み込みを最適化できます。パスが正しいことを確認してください。そうでないと、読み込みエラーが表示されます。

スパンタグの機能とは何ですか Apr 30, 2024 pm 01:54 PM

SPAN タグは、スタイル、色、フォントサイズなどの属性を適用してテキストを強調表示するために使用されるインライン HTML タグです。これには、テキストの強調、テキストのグループ化、ホバー効果の追加、およびコンテンツの動的更新が含まれます。これは、強調したいテキストの周囲に <span> タグと </span> タグを配置することで使用され、CSS スタイルまたは JavaScript を介して操作されます。 SPAN タグの利点には、意味の明確さ、スタイルの柔軟性、メンテナンスの容易さなどがあります。

プロンプトをjsでラップする方法 May 01, 2024 am 06:24 AM

JavaScript でプロンプト() メソッドを使用する場合、次の 3 つの方法で改行を実現できます。 1. 改行する位置に「\n」文字を挿入します。 2. 行に改行文字を使用します。プロンプトテキスト; 3. CSS の "white" -space: pre" スタイルを使用して改行を強制します。

jsのノードとは何ですか May 07, 2024 pm 09:06 PM

ノードは、HTML 要素を表す JavaScript DOM 内のエンティティです。これらはページ内の特定の要素を表し、その要素にアクセスして操作するために使用できます。一般的なノードタイプには、要素ノード、テキストノード、コメントノード、ドキュメントノードなどがあります。 getElementById() などの DOM メソッドを通じて、ノードにアクセスし、プロパティの変更、子ノードの追加/削除、ノードの挿入/置換、ノードのクローン作成などの操作を行うことができます。ノードトラバーサルは、DOM 構造内を移動するのに役立ちます。ノードは、ページコンテンツ、イベント処理、アニメーション、およびデータバインディングを動的に作成するのに役立ちます。