CSSセレクタを使用してラベルスタイルを設定するサンプルコード

CSSセレクタを使用してラベルスタイルを設定するサンプルコード

CSS セレクター

HTML タグにスタイルを設定すると、タグの属性を設定できます。

<div style="background-color: #2459a2;height: 48px;">ああ</div>

<head>タグにセレクターを設定することもできるので、各スタイルを一度だけ記述するだけで済みます。

<ヘッド>
    <メタ文字セット="UTF-8">
    <title>タイトル</title>
    <スタイル>
        <!--ここにセレクターを記述します-->
    </スタイル>
</head>

特定のセレクターは多数あります:

1. IDでスタイルをコピーする

#i1{
    背景色: #2459a2;
    高さ: 48px;
}

本文のタグは次のように使用されます: ただし、複数の ID を書き込むことはできないため、複数回使用することはできません。

    <div id="i1"></div>
    <div id="i1"></div>ただし、複数の ID を書くことはできません (標準ではありません)

2. クラス別にコピー:

/*クラスセレクター: このスタイルをコピーするには、class=c1 を使用しますが、ID を統一する必要があるという欠点を回避します*/
.c1{
    背景色: #2459a2;
    高さ: 60px;
}

使用する場合:

 <div class="c1">1251251</div> は倍数で表記できます <div class="c1">1251253</div> は倍数で表記できます

3. タグセレクター: 特定のタグをこのスタイルに変更します。

タグセレクター: すべてのdivタグを黒の背景と白のテキストに変更します

div{
    背景色: 黒;
    色: 白;
}

4. レベルセレクター: 中央のスペース

階層セレクター: spanタグ内のdivタグをこのスタイルに変更します

  スパン div{
            背景色: 黒;
            色: 白;
        }
        レイヤー: c1 と c2 の div をこのスタイルに設定します。c1 .c2 div{
            背景色: 黒;
            色: 白;
        }

5. 結合セレクター: 中央のカンマ

    <スタイル>
        組み合わせセレクタ: # または . は、#i1、#i2、#i3{ の組み合わせを実現できます。
            背景色: 黒;
            色: 白;
        }
        .c5,.c6,.c7{
            背景色: 黒;
            色: 白;
        }
    </スタイル>

6. 属性セレクター:

    <スタイル>        
        /*属性セレクター: type='text' をこのスタイルに設定します*/
        入力[タイプ='テキスト']{
            幅: 100ピクセル;
            高さ: 200px;
        }
        カスタムn値s1ラベルをこのスタイルに設定しますinput[n='s1']{
            幅: 100ピクセル;
            高さ: 200px;
        }
    </スタイル>

要約する

上記はエディターが紹介した CSS セレクター設定ラベル スタイルのサンプル コードです。皆様のお役に立てれば幸いです。ご質問がある場合は、メッセージを残してください。エディターがすぐに返信いたします。また、123WORDPRESS.COM ウェブサイトをサポートしてくださっている皆様にも感謝申し上げます。

<<:  Web ページでフラッシュの wmode 属性を使用する方法をご存知ですか?

>>:  MySQLは文字列の連結、インターセプション、置換、位置検索操作を実装しています

推薦する

MySQL における INSERT INTO SET の利点

MySQL データベースにデータを挿入します。以前はよく使われていた INSERT INTO テーブ...

MySQL 全文あいまい検索 MATCH AGAINST メソッドの例

MySQL 4.x 以降では、全文検索 MATCH ... AGAINST モード (大文字と小文字...

英語: リンクタグはIEでhrefを自動的に補完します

英語: IE では、リンク タグによって href が自動的に補完されます。 Ajax Link T...

MySQLクエリキャッシュに関するヒント

目次序文QueryCache の概要クエリキャッシュ構成QueryCache の使用queryCac...

CentOS に Redis と MySQL をインストールする

1|0MySQL(MariaDB) 1|11. 説明MariaDB データベース管理システムは My...

mysql mycat ミドルウェアのインストールと使用

1. mycatとはエンタープライズアプリケーション開発のための完全にオープンソースの大規模データベ...

Vueプロジェクトでのトークン検証ログイン(フロントエンド部分)

この記事の例では、Vueプロジェクトでのトークン検証ログインの具体的なコードを参考までに共有していま...

MySQL シリーズ 8 MySQL サーバー変数

チュートリアルシリーズMySQL シリーズ: MySQL リレーショナル データベースの基本概念My...

Mongodb の GUID 表示の問題の詳細な分析

問題を見つける最近、プログラムのストレージを Mongodb に移行したところ、Guid 型が書き込...

MySQL バッチ挿入ループの詳細なサンプルコード

背景数日前、MySql でページングを行っていたときに、ページングに制限 0,10 を使用するとデー...

ウェブページ作成時のHTMLタグの使用に注意してください

この記事では、Web ページの作成を学習するときに注意すべき HTML タグに関するいくつかの問題を...

Vueバスの簡単な使い方

Vueバスの簡単な使い方シナリオの説明:コンポーネント A にはコンポーネント B と C が含まれ...

node-media-serverを使用してシンプルなストリーミングメディアサーバーを構築する

node-media-server を使用するプロセスの一部を記録します。この記事の環境はWindo...

CSS を使用してマウスをホバーすることで他のタグのスタイルを変更するサンプルコード

序文:私の知る限り、現在 CSS で制御できるのは、タグをホバーしたときにそのタグの下の兄弟タグとサ...

CSS Houdini でダイナミックな波効果を実現

CSS Houdini は、CSS 分野における最もエキサイティングなイノベーションとして知られてい...