*[lang|="en"]{color: red;}
css3セレクター(1)_html/css_WEB-ITnose
テキストを直接開始します。
1. 属性セレクター属性セレクターは、属性と属性値に基づいて要素を選択します。属性セレクターを上手に使用すると、より高いレベルに引き上げることができます。
1. 属性のみに基づいて要素を選択する
特定の属性を選択し、属性値ではなく属性のみを考慮する要素に適用されます。 。
注: 要素と角括弧の間にはコロンやスペースはなく、角括弧の間にスペースを入れることはできません。
a. 属性に従って [E[Attr]] を選択します:
*[title]{color:blue;} タイトルを持つすべての要素のスタイルを設定します。
a[href]{color:red;} は、href を含むアンカー (a 要素) にのみスタイルを適用します。
b. 複数の属性に基づいて [E[Attr1][Attr2]] を選択します :
a[href][title]{color: red;} は、href と title の両方を持つアンカー (a 要素) に適用されます属性。
スタイルをデバッグするための非常に実用的な方法: img[alt] {border: 5px Solid red;} は、alt 属性を持つすべての画像にスタイルを適用し、それによってこれらの有効な画像を強調表示します。この方法を使用して、イメージが実際に有効かどうかを診断できます。
属性セレクターに従って要素を照合する場合、これらの属性は次のようにカスタマイズされた値にすることができます:属性 haha を定義し、それに test の値を割り当ててから、div[haha] 属性セレクターを使用してスタイルを照合し、追加します。
<style>div[haha]{ background-color: green;}</style><div haha="test">一个测试的div元素</div>
何気なく名前を選んだ理由は、属性セレクターではカスタム属性も使用できることを示すためですが、もちろんこれはお勧めできません。
2. 属性値に基づいて選択します
属性値に基づいて選択すると、選択範囲をさらに絞り込むことができます。
a. 1 つの属性値 : に基づいて [E[Attr=Val]] を選択します。
b. 複数の属性値に基づいて [E[Attr1=Val1][Attr2=Val2] を選択します。 [ href="http://www.w3school.com.cn/"][title="W3School"] {color: red;} 上記はすべて完全一致ですが、いくつかの属性値に基づいて選択することもできます。
c. 属性値の単語リスト内の単語と一致する [E[Attr~=Val]] スペースで区切られた複数の属性値の場合は、チルダ (~) を使用して一致させる必要があります。 [title~=hello]{color:red;} は Hello world
を選択できますが、Hello world< /h2> は選択できません。 ;。
d. 特定の属性選択タイプ [E[Attr|=Val]] E[Attr|=Val] は、属性 Attr を持つ要素を選択し、Attr の属性値は Val または Val- で始まります。 *[lang|="en"]{color: red;}ログイン後にコピー
*[lang|="en"]{color: red;}は、lang 属性が en に等しいか en- で始まるすべての要素と一致します。
Hello!
Greetings!
G'day!
Bonjour!
Jrooana!
e、ワイルドカードを使用した属性セレクター [E[Attr^=Val]] [E[Attr$=Val]] [E[Attr*=Val]]
css3 属性セレクターのボスにより、セレクターの機能が刻々と向上します。 E[att^="val"]、セレクターは要素 E に一致し、E 要素は属性 att を定義します。att の属性値は val で始まる任意の文字列です。
E[att$="val"]、セレクターは要素 E に一致し、E 要素は属性 att を定義し、att の属性値は val で終わる任意の文字列です。
E[att*="val"]、セレクターは要素 E と一致し、要素は属性 att を定義し、att 属性値の任意の場所に「val」が含まれます。
これらのワイルドカード文字は、jquery のものと同じです。
例:
<!DOCTYPE html><html><head><meta charset="utf-8"><title>选择器</title><style type="text/css">a[class^=icon]{ background: green; color:#fff;}a[href$=pdf]{ background: orange; color: #fff;}a[title*=more]{ background: blue; color: #fff;}</style></head><body><a href="xxx.pdf">我链接的是PDF文件</a><a href="#" class="icon">我类名是icon</a><a href="#" title="我的title是more">我的title是more</a></body></html>
f、属性セレクター html5 では新しい data 属性を使用することもできますが、お勧めしません。
div[data-myid="123456"]{ background-color: green;}<div id="xxx" name="test" data-myid="123456">div</div>:root はルート セレクターで、要素が配置されているドキュメント ツリーのルート要素と一致します。HTML ドキュメントでは、ルート要素は html です。 :root は html と同等です。
次の 3 つの書き方は同等です:
html:root { background:orange;}:root { background:orange;}html { background:orange;}ネット上でなぜ「root メソッドを使用することを推奨」と書かれているのかわかりませんが、理由は示されていません (笑)。私は :root については躊躇しています。なぜなら、それが何の役にも立たないと思うからです。
3. 構造型擬似クラスセレクター [:not]:not セレクターは、jquery の :not セレクターと同じで、特定の要素を除くすべての要素を選択します。
:not セレクターを使用する場合の注意事項:
注:【:not】は要素のすぐ後に続く必要があり、スペースを含めることはできません。 :not の後に括弧が続きますが、これは属性セレクターにはありません。
役立つ例: 送信ボタンを除くフォームの入力に赤い枠線を追加します。
<!DOCTYPE html><html><head><meta charset="utf-8"><title>选择器</title><style type="text/css">form{ width: 200px; margin: 20px auto;}div{ margin-bottom: 20px;}/*input[type="text"]{ border:1px solid red;}*/input:not([type="submit"]){ border:1px solid red;}</style></head><body><form> <div> <label for="name">昵称:</label> <input type="text" id="name" placeholder="starof"> </div> <div> <label for="password">密码:</label> <input type="text" id="password" placeholder="******"> </div> <div> <input type="submit" value="提交"> </div></form></body></html>
4. 構造擬似クラス セレクター [:empty]
: 空のセレクターは空を表し、実際にはコンテンツがなく、スペースは許可されません。 。举例：第一个
有文字内容，第二个
只有一个空格，第三个
为空。:empty就可以选中第三个
给它添加样式。
<style type="text/css">p{ background-color: orange; min-height: 30px;}:empty{ background-color: red;}</style><p>我是一个段落</p><p> </p><p></p>?在jquery中empty()和remove([expr])都用来移除元素，但是empty()是移除了指定元素中的所有子节点，仍保留其在dom中所占的位置。$("p").empty()，就会剩下
这样一个空标签，此时就可以用css3中的:empty为其添加样式。remove([expr])则是把其从dom中删除，而不会保留其所占的位置。 五、结构性伪类选择器【：target】：target为目标选择器，用来匹配相关URL指向的元素。
：target是个很有意思的结构化伪类选择器，可以很轻松的实现点一个标题显示内容，而且还可以用#brand:target p{}这样配合选择target下的后代选择器。
举例：简洁版手风琴效果。
这样.accordion :target p{display: block;}一行代码就可以实现手风琴的效果。
<!DOCTYPE HTML><html><head> <meta charset="utf-8" /> <title>css手风琴效果</title> <style type="text/css">.accordion p{ display: none;} .accordion :target p{ display: block;}/*和下面这种写法是等价的*//*#section-1:target p,#section-2:target p,#section-3:target p{ display: block;}; */ </style></head><body> <div class="accordion"> <div id="section-1"> <h2> <a href="#section-1">section-1</a> </h2> <p>第一部分内容</p> </div> <div id="section-2"> <h2> <a href="#section-2">section-2</a> </h2> <p>第二部分内容</p> </div> <div id="section-3"> <h2> <a href="#section-3">section-3</a> </h2> <p>第三部分内容</p> </div> </div></body></html>
MDN相关资料:target
Using the :target selector
六、结构性伪类选择器【first-child】":first-child"选择器表示的是选择父元素的第一个子元素E。
举个例子：对比后代元素，子元素和第一个子元素。
后代元素：选择所有后代。
子元素：只选择第一代。
:first-chid：选择第一代中的第一个元素【这个站在父元素的角度理解的，如果站在元素自身的角度理解就是，如果该元素是其父元素的第一个子元素，就选中，通俗理解就是如果小明是他爸爸的大儿子就选中】。
代码：
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>结构性伪类选择器?first-child</title> <style type="text/css"> ul.ancestor li{ background-color: yellow; } ul.ancestor >li{ background-color: green; } ul.ancestor >li:first-child{ color: orange; } </style></head><body> <ul class="ancestor"> <li> <a href="##">Link1</a> 文字颜色是橙色，超链接的color被浏览器样式覆盖了，所以才不是橙色 </li> <li> <a href="##">Link2</a> 关注文字颜色，不要关注超链接颜色 </li> <li> <a href="##">Link3</a> 关注文字颜色，不要关注超链接颜色 </li> <li> <ul> <li> <a href="##">Link4</a> 关注文字颜色，不要关注超链接颜色 </li> <li> <a href="##">Link5</a> 关注文字颜色，不要关注超链接颜色 </li> <li> <a href="##">Link6</a> 关注文字颜色，不要关注超链接颜色 </li> </ul> </li> <li> <a href="##">Link7</a> 不要关注超链接颜色 </li> </ul></body></html>分析：
说明：ul.ancestor是为了意思更明确这些写的，各位正式写嗲吗只要写.ancestor就好了。
ul.ancestor li：是后代选择器，所以样式会应用到所有的后代li元素，让它们背景色变黄。
ul.ancestor >li:是子选择器，所以样式会应用到第一代li元素，让它们背景色变绿，覆盖前面样式。
ul.ancestor >li:first-child：选择第一代中的第一个li元素，让其文字颜色变为橘色。
补充内容
为什么我要写这句话：文字颜色是橙色，超链接的color被浏览器样式覆盖了，所以才不是橙色。
因为慕课网出的一道题：将无序列表的第一个项目符号设置为红色。答案是ul li:first-child{ color: red;}。导致我以为只能选中项目符号，所以就测试了一下，确实是选择第一代中第一个元素。
有兴趣的可自行测试：
<p style="color:red">文字<a href="#">a</a></p>
效果为：，
原因是浏览器默认样式覆盖了继承自p的color样式。
Note:
看第一眼我以为我以为ul:first-child会是选中第一个li呢，但其真正的含义是，如果ul是它父元素的第一个子元素，就选中加样式。所以避免出错推荐像我这样ul.ancestor >li:first-child非常明确的写出，而不用自己去推测。
:last-child和:first-chld类似，用来选择第一代中最后一个元素，是个很实用的选择器。
举例：
<!DOCTYPE html><html><head><meta charset="utf-8"><title>选择器</title><style type="text/css">ul{ list-style-type: none; border:1px solid grey; display: inline-block; padding: 0; width: 200px;}li{ padding: 5px; border-bottom: 3px solid grey;}ul >li:last-child{ border-bottom:none;}</style></head><body><ul> <li>Item1</li> <li>Item2</li> <li>Item3</li> <li>Item5</li> <li>Item6</li></ul></body></html>
本文作者starof,因知识本身在变化，作者也在不断学习成长，文章内容也不定时更新，为避免误导读者，方便追根溯源，请诸位转载注明出处：有问题欢迎与我讨论，共同进步。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7540
15
1381
52
83
11
21
86
HTML5のクロスブラウザー互換性のベストプラクティスは何ですか？
Mar 17, 2025 pm 12:20 PM
記事では、HTML5クロスブラウザーの互換性を確保するためのベストプラクティスについて説明し、機能検出、プログレッシブエンハンスメント、およびテスト方法に焦点を当てています。
＆lt; Progress＆gt;の目的は何ですか 要素？
Mar 21, 2025 pm 12:34 PM
この記事では、HTML＆lt; Progress＆gt;について説明します。要素、その目的、スタイリング、および＆lt; meter＆gt;との違い要素。主な焦点は、＆lt; Progress＆gt;を使用することです。タスクの完了と＆lt; Meter＆gt; statiの場合
＆lt; datalist＆gt;の目的は何ですか 要素？
Mar 21, 2025 pm 12:33 PM
この記事では、HTML＆lt; Datalist＆GT;について説明します。オートコンプリートの提案を提供し、ユーザーエクスペリエンスの改善、エラーの削減によりフォームを強化する要素。
HTML5フォーム検証属性を使用してユーザー入力を検証するにはどうすればよいですか？
Mar 17, 2025 pm 12:27 PM
この記事では、ブラウザのユーザー入力を直接検証するために、必要、パターン、MIN、MAX、および長さの制限などのHTML5フォーム検証属性を使用して説明します。
＆lt; meter＆gt;の目的は何ですか 要素？
Mar 21, 2025 pm 12:35 PM
この記事では、html＆lt; meter＆gt;について説明します。要素は、範囲内でスカラーまたは分数値を表示するために使用され、Web開発におけるその一般的なアプリケーション。それは差別化＆lt; Meter＆gt; ＆lt; Progress＆gt;およびex
ビューポートメタタグとは何ですか？レスポンシブデザインにとってなぜそれが重要なのですか？
Mar 20, 2025 pm 05:56 PM
この記事では、モバイルデバイスのレスポンシブWebデザインに不可欠なViewportメタタグについて説明します。適切な使用により、最適なコンテンツのスケーリングとユーザーの相互作用が保証され、誤用が設計とアクセシビリティの問題につながる可能性があることを説明しています。
＆lt; iframe＆gt;の目的は何ですか タグ？使用する際のセキュリティ上の考慮事項は何ですか？
Mar 20, 2025 pm 06:05 PM
この記事では、＆lt; iframe＆gt;外部コンテンツをWebページ、その一般的な用途、セキュリティリスク、およびオブジェクトタグやAPIなどの代替案に埋め込む際のタグの目的。
HTMLは初心者のために簡単に学ぶことができますか？
Apr 07, 2025 am 12:11 AM
HTMLは、簡単に学習しやすく、結果をすばやく見ることができるため、初心者に適しています。 1）HTMLの学習曲線はスムーズで簡単に開始できます。 2）基本タグをマスターして、Webページの作成を開始します。 3）柔軟性が高く、CSSおよびJavaScriptと組み合わせて使用できます。 4）豊富な学習リソースと最新のツールは、学習プロセスをサポートしています。
