ホームページ >ウェブフロントエンド >htmlチュートリアル >css3セレクター(1)_html/css_WEB-ITnose
css3セレクター(1)_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:39:091252ブラウズ
テキストを直接開始します。
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;} は 3231d9bb3309b9de0d61e4a49ffd4125Hello world2e9b454fa8428549ca2e64dfac4625cd を選択できますが、a6ce9d1b9ad0bbe5b484c534369d3502Hello world03f5e666463591f0c6a59c067651fe4f は選択できません。 ;。
d. 特定の属性選択タイプ [E[Attr|=Val]]E[Attr|=Val] は、属性 Attr を持つ要素を選択し、Attr の属性値は Val または Val- で始まります。 *[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> 2. 構造擬似クラス選択 [:root] :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]
: 空のセレクターは空を表し、実際にはコンテンツがなく、スペースは許可されません。 。举例：第一个e388a4556c0f65e1904146cc1a846bee有文字内容，第二个e388a4556c0f65e1904146cc1a846bee只有一个空格，第三个e388a4556c0f65e1904146cc1a846bee为空。:empty就可以选中第三个e388a4556c0f65e1904146cc1a846bee给它添加样式。
<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()，就会剩下e388a4556c0f65e1904146cc1a846bee94b3e26ee717c64999d7867364b1b4a3这样一个空标签，此时就可以用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,因知识本身在变化，作者也在不断学习成长，文章内容也不定时更新，为避免误导读者，方便追根溯源，请诸位转载注明出处：有问题欢迎与我讨论，共同进步。