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 までご連絡ください。

cohost.orgの失われたCSSトリックApr 25, 2025 am 09:51 AM

この投稿では、Blackle Moriは、CohostのHTMLサポートの限界を押し広げようとしている間に見つかったハックのいくつかを示します。あえてこれらを使用してください、あなたもCSS犯罪者とラベル付けされないようにしてください。

カーソルの次のレベルCSSスタイリングApr 23, 2025 am 11:04 AM

CSSを備えたカスタムカーソルは素晴らしいですが、JavaScriptを使用して次のレベルに物事を引き出すことができます。 JavaScriptを使用して、カーソル状態間で移行し、カーソル内に動的テキストを配置し、複雑なアニメーションを適用し、フィルターを適用できます。

Worlds Collide：スタイルクエリを使用したキーフレーム衝突検出Apr 23, 2025 am 10:42 AM

2025年には、互いに互いに跳ね返る要素を伴うインタラクティブなCSSアニメーションは、CSSにPongを実装する必要はありませんが、CSSの柔軟性とパワーの増加はLee＆＃039;の疑いを補強します。

UI効果にCSSバックドロップフィルターを使用しますApr 23, 2025 am 10:20 AM

CSSバックドロップフィルタープロパティを使用してユーザーインターフェイスをスタイルするためのヒントとコツ。バックドロップフィルターを複数の要素間でレイヤー化する方法を学び、それらを他のCSSグラフィカル効果と統合して、精巧なデザインを作成します。

微笑んでいますか？Apr 23, 2025 am 09:57 AM

まあ、SVG＆＃039;の組み込みのアニメーション機能は、計画どおりに非推奨されることはありませんでした。確かに、CSSとJavaScriptは負荷を運ぶことができる以上のものですが、以前のようにSmilが水中で死んでいないことを知っておくのは良いことです

「かわいい」は見る人の目にありますApr 23, 2025 am 09:40 AM

イェーイ、テキストワラップのジャンプを見てみましょう：サファリテクノロジーのプレビューにかなり着陸してください！しかし、それがChromiumブラウザーでの仕組みとは異なることに注意してください。

CSS-Tricks XLIIIを記録しますApr 23, 2025 am 09:35 AM

このCSS-Tricksアップデートは、アルマナック、最近のポッドキャスト出演、新しいCSSカウンターガイド、および貴重なコンテンツを提供するいくつかの新しい著者の追加の大幅な進歩を強調しています。

Tailwind＆＃039;の@Apply機能は、響きよりも優れていますApr 23, 2025 am 09:23 AM

ほとんどの場合、人々はTailwind＆＃039;の@Apply機能を紹介します。このように展示されたとき、@Applyはまったく有望な音をしません。だからobvio

See all articles

ホットAIツール

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

mPDF は、UTF-8 でエンコードされた HTML から PDF ファイルを生成できる PHP ライブラリです。オリジナルの作者である Ian Back は、Web サイトから「オンザフライ」で PDF ファイルを出力し、さまざまな言語を処理するために mPDF を作成しました。 HTML2FPDF などのオリジナルのスクリプトよりも遅く、Unicode フォントを使用すると生成されるファイルが大きくなりますが、CSS スタイルなどをサポートし、多くの機能強化が施されています。 RTL (アラビア語とヘブライ語) や CJK (中国語、日本語、韓国語) を含むほぼすべての言語をサポートします。ネストされたブロックレベル要素 (P、DIV など) をサポートします。

SecLists

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