ホームページ ウェブフロントエンド CSSチュートリアル 属性セレクターと疑似クラス セレクターの使用方法

属性セレクターと疑似クラス セレクターの使用方法

Nov 24, 2017 am 10:00 AM
説明書 属性 セレクタ

今日は、属性セレクターと疑似クラスセレクターの使用法、関連する接続、および違いについて説明します。これは小さな例です。

属性セレクター:

[attr~="value"] Word Word space word Word が有効である必要があります

[attr|="value"] 値は value または value-word で始まります

注:

属性の選択は選択された要素を識別するために正規表現を使用するのは困難ですが、その方が効率的です

疑似クラスセレクター:

: before

: after

: lang(val) val/val-word

: nth-child(n) n は 1 から始まり、奇数、基数、偶数

:nth-of-type(n) セレクターは、親要素の特定の型の N 番目の子要素であるすべての要素に一致します。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<link href="css/index.css" rel="stylesheet" type="text/css" />
</head>
<body>
<!--
<p>aaaaaaa</p>
<p>aaaaaaa</p>
<p>aaaaaaa</p>
--->
<div>
       <p>aaa</p>
       <p>aaa</p>
       <p>aaa</p>
       <p>aaa</p>
</div>
</body>
</html>
Css部分:
@charset "utf-8";
/* CSS Document */
/*
p:before{
       content:"ccc"; 
}
 
p:lang(en){
       border:1px solid #ff0000;  
}
p:nth-child(even){
       background:#F00; 
}
*/
p:nth-of-type(3){  /* p标记的父元素 下的 第3个p元素*/
       background:#F00; 
}
ログイン後にコピー

関連資料:

DIV から溢れるコンテンツを非表示にする方法

CSS レイアウト手法とは何ですか

CSS でフォ​​ント スタイルを設定する方法

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

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

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

DirectX修復ツールの使い方は? DirectX修復ツールの詳しい使い方 DirectX修復ツールの使い方は? DirectX修復ツールの詳しい使い方 Mar 15, 2024 am 08:31 AM

DirectX 修復ツールは専門的なシステム ツールであり、その主な機能は現在のシステムの DirectX 状態を検出することであり、異常が見つかった場合は直接修復できます。 DirectX 修復ツールの使い方がわからないユーザーも多いと思いますので、以下の詳細なチュートリアルを見てみましょう。 1. 修復ツール ソフトウェアを使用して修復検出を実行します。 2. 修復の完了後、C++ コンポーネントに異常な問題があることを示すメッセージが表示された場合は、[キャンセル] ボタンをクリックし、[ツール] メニュー バーをクリックしてください。 3. [オプション] ボタンをクリックし、拡張機能を選択して、[拡張機能の開始] ボタンをクリックします。 4. 拡張が完了したら、再検出して修復します。 5. 修復ツールの操作が完了した後も問題が解決しない場合は、エラーを報告したプログラムをアンインストールして再インストールしてみてください。

Baidu Netdisk の使用方法 - Baidu Netdisk の使用方法 Baidu Netdisk の使用方法 - Baidu Netdisk の使用方法 Mar 04, 2024 pm 09:28 PM

Baidu Netdisk の使い方をまだ知らない友人も多いので、以下では編集者が Baidu Netdisk の使い方を説明しますので、必要な場合は急いでご覧ください。ステップ 1: Baidu Netdisk をインストールした後、直接ログインします (図を参照); ステップ 2: 次に、ページのプロンプトに従って [マイ共有] と [転送リスト] を選択します (図を参照); ステップ 3: 「 「友達共有」では、写真やファイルを友達と直接共有できます (図を参照); ステップ 4: 次に、「共有」を選択し、コンピューター ファイルまたはネットワーク ディスク ファイルを選択します (図を参照); 5 番目のステップ 1:次に、友達を見つけることができます (写真に示すように); ステップ 6: 「機能宝箱」で必要な機能を見つけることもできます (写真に示すように)。以上、編集者の意見です

KMS アクティベーション ツールとは何ですか? KMS アクティベーション ツールの使用方法は? KMS アクティベーション ツールの使用方法は? KMS アクティベーション ツールとは何ですか? KMS アクティベーション ツールの使用方法は? KMS アクティベーション ツールの使用方法は? Mar 18, 2024 am 11:07 AM

KMS ライセンス認証ツールは、Microsoft Windows および Office 製品のライセンス認証に使用されるソフトウェア ツールです。 KMS は KeyManagementService の略で、鍵管理サービスです。 KMS ライセンス認証ツールは、KMS サーバーの機能をシミュレートして、コンピューターが仮想 KMS サーバーに接続して Windows および Office 製品をライセンス認証できるようにします。 KMS ライセンス認証ツールは、サイズが小さく、機能が強力です。ワンクリックで永続的にライセンス認証できます。インターネットに接続せずに、あらゆるバージョンのウィンドウ システムとあらゆるバージョンの Office ソフトウェアをライセンス認証できます。現在、最も成功しているツールです。頻繁に更新される Windows ライセンス認証ツール 今日はそれを紹介します kms ライセンス認証作業を紹介します

ショートカットキーを使ってセルを結合する方法 ショートカットキーを使ってセルを結合する方法 Feb 26, 2024 am 10:27 AM

セルを結合するためのショートカット キーの使用方法 日常業務では、表の編集や書式設定が必要になることがよくあります。セルの結合は、表の美しさと情報の表示効果を向上させるために、隣接する複数のセルを 1 つのセルに結合する一般的な操作です。 Microsoft ExcelやGoogle Sheetsなどの主流の表計算ソフトでは、セルの結合操作は非常に簡単でショートカットキーで実現できます。この2つのソフトでセルを結合するショートカットキーの使い方を紹介します。存在する

ポットプレイヤーの使い方 - ポットプレイヤーの使い方 ポットプレイヤーの使い方 - ポットプレイヤーの使い方 Mar 04, 2024 pm 06:10 PM

Potplayer は非常に強力なメディア プレーヤーですが、まだ Potplayer の使い方を知らない友達も多いので、今日は Potplayer の使い方を詳しく紹介して、皆さんのお役に立てればと思います。 1. PotPlayer のショートカット キー: PotPlayer プレーヤーのデフォルトの共通ショートカット キーは次のとおりです: (1) 再生/一時停止: スペース (2) 音量: マウス ホイール、上下の矢印キー (3) 進む/戻る: 左右の矢印キー (4) ブックマーク: P- ブックマークの追加、H-ビューブックマーク (5) フルスクリーン/復元: Enter (6) 複数の速度: C-加速、7) 前/次のフレーム: D/

PyCharmとは何ですか?機能紹介と使い方の詳しい説明 PyCharmとは何ですか?機能紹介と使い方の詳しい説明 Feb 20, 2024 am 09:21 AM

PyCharm は、JetBrains が開発したプロフェッショナルな Python 統合開発環境 (IDE) で、Python 開発者に強力な機能とツールを提供し、Python コードの作成をより効率的かつ便利にします。 PyCharm は、Windows、macOS、Linux などの複数のオペレーティング システムをサポートし、複数の Python バージョンもサポートし、開発者が独自のニーズに応じて IDE 環境をカスタマイズできるようにする豊富なプラグインと拡張機能を提供します。 P

Xiaoma win7 アクティベーション ツールの使用方法 - Xiaoma win7 アクティベーション ツールの使用方法 Xiaoma win7 アクティベーション ツールの使用方法 - Xiaoma win7 アクティベーション ツールの使用方法 Mar 04, 2024 pm 06:16 PM

Xiaoma win7 アクティベーション ツールを使用しているユーザーは多いと思いますが、Xiaoma win7 アクティベーション ツールの使い方をご存知ですか?次に、Xiaoma win7 アクティベーション ツールの使用方法をエディターが説明します。ぜひ次の記事へ行って見てみましょう。最初のステップは、システムを再インストールした後、「マイ コンピュータ」に移動し、上部メニューの「システムのプロパティ」をクリックして、Windows のライセンス認証ステータスを確認することです。 2 番目のステップでは、クリックして win7 アクティベーション ツールをオンラインでダウンロードし、クリックして開きます (どこでも利用できるリソースが多数あります)。 3 番目のステップは、Xiaoma ライセンス認証ツールを開き、[Windows を完全にライセンス認証する] をクリックすることです。 4 番目のステップは、アクティベーション プロセスがアクティベーションを完了するまで待機することです。ステップ 5: Windows のライセンス認証ステータスを再度確認し、システムがライセンス認証されていることを確認します。

マグネット リンクの使用方法 - マグネット リンクの使用方法 マグネット リンクの使用方法 - マグネット リンクの使用方法 Mar 04, 2024 pm 04:37 PM

みなさんもマグネットリンクソフトをお使いですか?でも、マグネットリンクの使い方はご存知ですか?以下は編集部が提供するマグネットリンクの使い方ですので、興味のある方はぜひご覧ください。 1 つ目の方法は比較的簡単で、[PC] でマグネット リンクを使用してダウンロードする場合は、まず Thunder を開きます。次に、マグネット リンクを直接コピーします。リンクは Thunder で自動的に検出され、ダウンロード ウィンドウがポップアップ表示されます。クリックしてダウンロードを確認するだけで、ダウンロード プロセスが開始されます。注: Xunlei の古いバージョンの中には、コピーしたマグネット リンクを自動的に検出できないものもあります。使用するには、Xunlei の最新バージョンに更新する必要があります。

See all articles