属性値の正規一致セレクターには 3 つの種類があります。
これら 3 つの属性セレクターは、単語ではなく文字と一致します。アングル記号 これらのセレクターを使用すると、純粋な CSS で非常に優れた機能を作成できます。 ハイパーリンクの小さなアイコンとファイルタイプのグラフィックを表示します
[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") 繰り返しなし 左; } 効果 /* 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 は、トランザクションをサポートするためにさまざまなストレージ エンジンを提供しま...
メディアデバイスタイプの使用法の詳細な説明: <!DOCTYPE html> <h...
問題を見つける最近、プロジェクトで問題が発生しました。接続が多すぎるため、「接続が多すぎます」という...
目次2. pt-pmapを使用したスタック分析3. このコラムのボトルネックポイントの分析4. パー...
本日、開発中に、顧客からページをキャッシュしないように要求される方法に遭遇しました。調べたところ、ペ...
1. mysqlにログインします。 mysql -u ルート -h 127.0.0.1 -p 2. ...
データベースの組み込み関数の使用この記事では、主に日付関数、文字列関数、数学関数など、データベースの...
目次序文構築可能なスタイルシートとは何ですか? CSSモジュールスクリプトの使用インポートアサーショ...
最初のステップ組み込みのパッケージ管理機能で一度削除する yum 削除 nodejs npm -y ...
1. 機能紹介sed (Stream EDitor) は、コンテンツを 1 行ずつ処理するストリーム...
目次序文$属性例: $listeners (公式説明)使用シナリオ要約する序文複数レベルのコンポーネ...
導入面接官がこんな質問をしたことはありませんか?データベースをどのように最適化しますか?では、この質...
1. <body> タグ: Web ページの本体をマークするために使用されます。body...
目次序文フロントエンド構造バックエンド構造(ノード+エクスプレス) FormDataに基づくファイル...
目次1. プロジェクト環境: 2: DNSサーバーの設定i: 前方解析を構成する: ii: 逆解像度...