CSS 属性値正規マッチングセレクターの使い方 (ヒント)

CSS 属性値正規マッチングセレクターの使い方 (ヒント)

属性値の正規一致セレクターには 3 つの種類があります。

  • [属性^="値"]
  • [属性$="値"]
  • [属性*="値"]

これら 3 つの属性セレクターは、単語ではなく文字と一致します。アングル記号^ 、ドル記号$ 、アスタリスク*は、正規表現における特別な識別子であり、それぞれ前の一致、次の一致、任意の一致を表します。

これらのセレクターを使用すると、純粋な CSS で非常に優れた機能を作成できます。
<!-- 続き -->

ハイパーリンクの小さなアイコンとファイルタイプのグラフィックを表示します

[attr^="val"]前方一致セレクターを使用すると、 <a>要素のリンク アドレス タイプを決定し、対応する小さいアイコンを表示できます。ハイパーリンクを表示する小さいアイコンのスタイルは次のとおりです。

[href] {パディング左: 18px;}
/* リンクアドレス*/
[href^="https"],
[href^="//"] {
    背景: url("./images/link.png") 繰り返しなし 左;
}
/* ウェブページ内のアンカーリンク */
[href^="#"]
    背景: url("./images/anchor.png") 繰り返しなし 左;
}
/* 携帯電話とメール */
[href^="電話番号:"]
    背景: url("./images/tel.png") 繰り返しなし 左;
}
[href^="メール送信先:"]
    背景: url("./images/e-mail.png") 繰り返しなし 左;
}

効果

[attr$="val"]を使用し、セレクターを一致させることで、ファイルタイプの小さなアイコンを表示できます。 CSS は次のとおりです。

/* PDF ファイルを指す */
[href$=".pdf"]
    背景: url("./images/pdf.png") 繰り返しなし 左;
}
/* zipファイルをダウンロード */
[href$=".zip"] {
    背景: url("./images/zip.png") 繰り返しなし 左;
}
/* 画像リンク*/
[href$=".png"],
[href$=".gif"],
[href$=".jpg"],
[href$=".jpeg"],
[href$=".webp"]
    背景: url("./images/image.png") 繰り返しなし 左;
}

効果は以下のとおりです

CSS属性セレクタ検索フィルタリング技術

属性セレクターを使用すると、アドレス帳や都市リストなどの検索フィルタリング効果を実現できます。これによりパフォーマンスが向上し、必要なコードが少なくなります。

HTML 構造は次のとおりです。

<input type="search" id="input" placeholder="都市名またはピンインを入力してください" />
<ul>
    <li data-search="重慶市chongqing">重慶市</li>
    <li data-search="ハルビン市haerbin">ハルビン市</li>
    <li data-search="長春市changchun">長春市</li>
    <li data-search="長沙市長沙">長沙市</li>
    <li data-search="沪shanghai">上海</li>
    <li data-search="杭州市杭州">杭州市</li>
</ul>

この時点で、入力ボックスにコンテンツを入力すると、一致検証用のコードを自分で記述しなくても、入力コンテンツに基づいて CSS コードを動的に作成することで、検索と一致の効果を実現できます。

var eleStyle = document.createElement('style');
document.head.appendChild(eleStyle);
// テキスト入力ボックス input.addEventListener('input', function() {
    var 値 = this.value.trim();
    eleStyle.innerHTML = value ? '[data-search]:not([data-search*="' + value +'"]) { display: none; } ' : '';
});

以上で、CSS 属性値正規一致セレクターを賢く使う方法(コツ)についての記事は終了です。CSS 属性値正規一致に関するより関連性の高いコンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き閲覧してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

<<:  シンプルなプログレスバーを作成するための HTML+CSS

>>:  Javascript ツリー メニュー (11 項目)

推薦する

MySQLトランザクションを実行するための構文とプロセスの詳細な説明

概要: MySQL は、トランザクションをサポートするためにさまざまなストレージ エンジンを提供しま...

CentOS 7 で MySQL 接続数が 214 に制限される問題の解決方法

問題を見つける最近、プロジェクトで問題が発生しました。接続が多すぎるため、「接続が多すぎます」という...

MySQL パーティション テーブルに関するパフォーマンス バグ

目次2. pt-pmapを使用したスタック分析3. このコラムのボトルネックポイントの分析4. パー...

ページキャッシュを無効にするいくつかの方法を共有する

本日、開発中に、顧客からページをキャッシュしないように要求される方法に遭遇しました。調べたところ、ペ...

IP アドレス経由で MySql にアクセスする方法

1. mysqlにログインします。 mysql -u ルート -h 127.0.0.1 -p 2. ...

MySQL データベース 8 - データベース内の関数の適用の詳細な説明

データベースの組み込み関数の使用この記事では、主に日付関数、文字列関数、数学関数など、データベースの...

この記事では、CSSのようなJSモジュールをインポートする方法を説明します。

目次序文構築可能なスタイルシートとは何ですか? CSSモジュールスクリプトの使用インポートアサーショ...

Linuxはnode.jsを完全に削除し、yumコマンドで再インストールします。

最初のステップ組み込みのパッケージ管理機能で一度削除する yum 削除 nodejs npm -y ...

Linux sedコマンドの使用

1. 機能紹介sed (Stream EDitor) は、コンテンツを 1 行ずつ処理するストリーム...

Vue カプセル化コンポーネント ツール $attrs、$listeners の使用

目次序文$属性例: $listeners (公式説明)使用シナリオ要約する序文複数レベルのコンポーネ...

MYSQLデータベースの最適化段階を簡単に理解する

導入面接官がこんな質問をしたことはありませんか?データベースをどのように最適化しますか?では、この質...

HTML ボディタグと HTML でよく使われる制御タグの詳細な説明

1. <body> タグ: Web ページの本体をマークするために使用されます。body...

js に基づいて大きなファイルのアップロードとブレークポイントの再開を管理する方法

目次序文フロントエンド構造バックエンド構造(ノード+エクスプレス) FormDataに基づくファイル...

Centos7 での DNS サーバーの構築の概要

目次1. プロジェクト環境: 2: DNSサーバーの設定i: 前方解析を構成する: ii: 逆解像度...