HTML CSS の 3 つの一般的なスタイル セレクター

HTML CSS の 3 つの一般的なスタイル セレクター

1: タグセレクター

タグセレクターはすべてのタグに使用されます。ここでは p を例に挙げます。つまり、 p を含むすべてのタグがこのスタイルになります。


コードをコピー
コードは次のとおりです。

<html>
<ヘッド>
<スタイルタイプ="text/css">
p{font:"宋体"; color:#FF0000}
</スタイル>
</head>
<本文>
<pid="p1">タグセレクターを表示しています</p>
<pid="p2">タグセレクターも使用します</p>
<h1>セレクターによって変更されていません</h1>
</本文>
</html>

2: id セレクター。id="yy" のみがこのスタイルを持ち、ページ内の要素の ID は一意である必要があるため、id セレクターは一意であることに注意してください。 。 。 id セレクターは # で始まり、次のように使用されることはご存じでしょう: id=""


コードをコピー
コードは次のとおりです。

<html>
<ヘッド>
<スタイルタイプ="text/css">
#yy{font:"宋体"; color:#FF0000}
</スタイル>
</head>
<本文>
<pid="yy">IDセレクターを表示しています</p>
<pid="p">IDセレクターによって変更されません</p>
<h1>セレクターによって変更されていません</h1>
</本文>
</html>

3: クラスセレクター。クラスセレクターは で始まります。このスタイルを表示するには、要素の class="" を設定するだけです。使用法は次のとおりです: class=""


コードをコピー
コードは次のとおりです。

<html>
<ヘッド>
<スタイルタイプ="text/css">
.yy{font:"宋体"; color:#FF0000}
</スタイル>
</head>
<本文>
<pclass="yy">クラスセレクターを表示しています</p>
<pclass="yy">クラスセレクターによって変更されません</p>
<h1>セレクターによって変更されていません</h1>
</本文>
</html>

<<:  Centos8.3、dockerデプロイメントspringbootプロジェクトの実際のケース分析

>>:  CSSはフロントエンドの画像変形の問題を完璧に解決します

推薦する

Vue3+スクリプト設定+ts+Vite+Volarプロジェクト

目次Viteを使用してvue + tsプロジェクトを作成するVue 3の3つの構文オプションAPIコ...

JavaScript 開発における標準コミットメッセージの重要性の詳細な説明

目次標準コミットメッセージの重要性コミットするコミットリント依存関係をインストールする.commit...

特定の部門 ID に基づいて、すべての下位レベルの複数レベルのサブ部門を照会する MySQL の例

シミュレーションテーブルとデータスクリプト次の SQL ステートメントをコピーして、sys_dept...

CocosCreator の新しいリソース管理システムの分析

目次1. 資源と建設1.1 クリエイターリソースファイルの基本1.2 リソースの構築2. アセットバ...

MySQLデータの挿入、更新、削除の詳細

目次1. 挿入2. 更新3. 削除1. 挿入 顧客に挿入( 顧客.顧客住所、 顧客.cust_cit...

例によるMySql CURRENT_TIMESTAMP関数の分析

時間フィールドを作成するときデフォルトのCURRENT_TIMESTAMPデータを挿入する際、このフ...

js での typeof の使い方を理解するための記事

目次ベース戻り値の型文字列とブール値数値とbigintシンボル未定義関数物体他のよくある質問参照エラ...

CSS でホバー ドロップダウン メニューを実装する方法

いつものように、今日は非常に実用的な CSS 効果についてお話します。マウスがボタンに移動すると、ド...

Win10 での MySQL 8.0.15 のインストールと設定のグラフィック チュートリアル

この記事ではMySQL 8.0.15のインストールと設定方法を参考までに記録します。具体的な内容は以...

ウェブフロントエンドウェブ開発の一般的なプロセスの簡単な紹介

フロントエンド開発を行っている初心者の学生を多く見かけますが、彼らの効率は比較的遅いです。常にコード...

同期スクロールを実現するための複数のテーブル要素のサンプルコード

Element UIは、複数のテーブルを同時に水平および垂直にスクロールすることを実装します。 コー...

MySQL サーバー IO 100% 分析および最適化ソリューション

序文ストレス テスト中に、リソース使用のボトルネックによって発生する最も直接的なパフォーマンスの問題...

MySQL 5.7.18 のインストール中に MySQL サービスの起動に失敗する問題の解決策

MySQL は非常に強力なリレーショナル データベースです。しかし、初心者の中には、インストールや設...

航空機戦争ゲームを実装するためのネイティブJS

この記事の例では、参考のために航空機戦争ゲームを実装するためのJSの具体的なコードを共有しています。...