ホームページ >ウェブフロントエンド >htmlチュートリアル >CSS3セレクター学習メモ_html/css_WEB-ITnose
CSS3セレクター学習メモ_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:17:031161ブラウズ
CSS セレクターの概要:
1.基本セレクター
1. ワイルドカード セレクター : [ * ] ドキュメント内のすべての HTML 要素を選択します。
*{margin: 0;padding: 0;} /*选择页面中的所有元素并设置margin和padding值为0*/ .mumu *{background:#000;} /*选择类名为mumu的元素下面的所有元素设置背景为黑色*/
2. 要素セレクター : [ E ] 指定されたタイプの HTML 要素を選択します。
p{color:red;} /*选择p元素*/
3. ID セレクター : [ #id ] ID 属性値が「id」である任意のタイプの要素を選択します。
<style>#div1{width:100px;background:#000;}</style><body> <div id="div1">1</div></body>
4. クラスセレクター : [ .class ] 指定されたクラス属性値を「class」として持つ複数の要素を選択します。
5. グループセレクター:
[ selector1,selectorN ] 各セレクターに一致する要素のセットをマージします。 2つ。 階層セレクター
1. 子孫セレクター:[
E F] 一致する F 要素を選択し、一致する F 要素は内部の一致する E 要素に含まれます。 rree 2. サブセレクター :
[E>F ] 一致する F 要素を選択し、 F 要素 は の直接の子要素
<style>.mumu{width:100px;background:#000;}</style><body> <div class="mumu">1</div></body> 3. 隣接する兄弟要素セレクター : [
E+F ] 一致する F 要素を選択すると、一致する F 要素は一致する E 要素のすぐ後ろに配置されます <style>.section-1,.section-2,.section-3{background:#000;} /*给三个div定义公用的样式 */</style><body> <div class="section-1">1</div> <div class="section-2">2</div> <div class="section-3">3</div></body> 4. ユニバーサル選択デバイス
E~F] 一致する F 要素を選択すると、E 要素の後の一致するすべての F 要素に配置されます (E と F は同じ親要素を持つ兄弟要素 )
<style>.div1 div{background:#000;} /*选择div1里面的所有div*/</style><body> <div class="div1"> <div class="div2">2</div> <div class="div3">3</div> </div></body> 3. 属性セレクター 1. プロパティ名のみを使用しますが、属性値は決定されません
<style>.div1>div{background:#000;} /*选择div1里面的div1,div2和div3,不会选到div*/</style><body> <div class="div1"> <div class="div2">2</div> <div class="div3"> <div>4</div> </div> </div></body> 2.E[attr=value] は属性名を指定し、属性の属性値を指定します
<style>.div2+p{background:#000;} /*选择div2后面的第一个p元素*/</style><body> <div class="div1"> <div class="div2">2</div> <p>p1</p> <p>p2</p> </div></body> 3 .E[attr~=value] は、この属性値はスペースで区切られた単語リストです。単語リストに値単語 が含まれている限り、それが選択されます
<style>.div2~p{background:#000;} /*选择div2后面所有的p元素*/</style><body> <div class="div1"> <div class="div2">2</div> <p>1</p> <p>2</p> </div></body> 4.E[attr] ^=value] は属性名を指定し、属性値を持ちます。属性値は value
<style type="text/css"> p[id]{background:red;} p[mumu]{background:blue;} /*将会选择具有[attr]属性的p标签*/</style><body> <p mumu="zM">1</p> <p id="xm">2</p></body> 5 で始まります。E[attr $=value] は属性名を指定し、属性値であり、属性値は値
<style type="text/css"> p[mumu=zM]{background:blue;} /*将会选择具有mumu属性且值为zM的p标签*/</style><body> <p mumu="zM">1</p> <p mumu="xm">2</p></body>
6.E[attr*=value] で属性名を指定し、属性値があり、属性値には value が含まれます
<style type="text/css"> p[mumu~=big]{background:blue;}/*选择具有mumu属性且其中一个属性值为big的p标签*/</style><body> <p mumu="zM big">1</p> <p mumu="xm">2</p></body> 7.E[attr|="value"] は属性名を指定し、属性値は value または "value- " で始まる値 (例: b-cn)
<style type="text/css"> p[mumu|=b]{background:#CC0;}/*选择mumu属性值里以b或者b-开头的 p标签*/</style><body> <p mumu="b-zM big">1</p> <p mumu="b-xm">2</p> <p mumu="gm">3</p> <p mumu="b">4</p></body>
四．伪类选择器
1.动态伪类选择器
<style type="text/css"> E:link /*选择匹配的E元素，而且匹配元素被定义了超链接并未被访问过。常用于链接描点上*/ E:visited /*选择匹配的E元素，而且匹配元素被定义了超链接并已被访问过。常用于链接描点上*/ E:active /*选择匹配的E元素，且匹配元素被激活。常用于链接描点和按钮上*/ E:hover /*选择匹配的E元素，且用户鼠标停留在元素E上。IE6及以下浏览器仅支持a:hover*/ E:focus /*选择匹配的E元素，而且匹配元素获取焦点*/</style>
2.目标伪类选择器
[ E:target ] 功能：选择匹配E的所有元素，且匹配元素被相关URL指向
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title><style> div{width:300px;height:200px;background:#000; font:50px/200px "微软雅黑"; color:#fff; text-align:center; display:none;} div:target{ display:block;}</style></head><body> <a href="#div1">div1</a> <a href="#div2">div2</a> <a href="#div3">div3</a> <div id="div1">div1</div> <div id="div2">div2</div> <div id="div3">div3</div></body></html>
3. 否定伪类选择器
[ E:not(s) ] 表示匹配所有除元素F外的E元素
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title><style> h1:not(.h2){ background:Red;}</style></head><body> <h1>h1</h1> <h1 class="h2">h1</h1> <h1>h1</h1></body></html>
4.状态伪类选择器
<style> E:disabled; /*表示不可点击的表单控件*/ E:enabled; /*表示可点击的表单控件*/ E:checked; /*表示已选中的checkbox或radio*/</style>
5.结构伪类选择器
E:nth-child(n) 表示E父元素中的第n个字节点（从前往后数），注意：CSS3中计数是从1开始,n可运算
<style> E:nth-child(odd){background:red}/*匹配奇数行或者nth-child(2n+1)*/ E:nth-child(even){background:red}/*匹配偶数行或者nth-child(2n)*/</style>
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title><style> body *:nth-child(2){background:red;}/* p:nth-child(2){background:red;}会没有变化 因为：p:nth-child(2) 找p标签父级下的第二个子元素，并且这个元素还的是p标签 */</style></head><body> <p>p1</p> <h1>h1</h1> <p>p2</p> <h1>h2</h1> <p>p3</p> <h1>h3</h1> <p>p4</p> <p>p5</p></body></html>
E:nth-last-child(n) 表示E父元素中的第n个字节点，从后向前计算
E:nth-of-type(n) 表示E父元素中的第n个字节点，且类型为E，从前往后计算
E:nth-last-of-type(n) 表示E父元素中的第n个字节点，且类型为E,从后向前计算
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title><style> p:nth-of-type(2){background:red;}/*找p标签父级下的第二个p元素*/</style></head><body> <p>p1</p> <h1>h1</h1> <p>p2</p> <h1>h2</h1> <p>p3</p> <h1>h3</h1> <p>p4</p> <p>p5</p></body></html>
E:first-child 表示E元素中的第一个子节点
E:last-child 表示E元素中的最后一个子节点
E:first-of-type 表示E父元素中的第一个子节点且节点类型是E的
E:last-of-type 表示E父元素中的最后一个子节点且节点类型是E的
:first-child==:nth-child(1)
:last-child==:nth-last-child(1)
:first-of-type==nth-of-type(1)
:last-of-type==nth-last-of-type(1)
E:empty 表示E元素中没有子节点。注意：子节点包含文本节点
<style> p{height:30px;border:1px solid #000;} p:empty{background:red;}</style></head><body> <p></p>//it <h1>h1</h1> <p>p2</p> <h1>h2</h1> <p>p3</p></body>
E:only-child 表示E元素中只有一个子节点。注意：子节点不包含文本节点
E:only-of-type 表示E的父元素中只有一个子节点，且这个唯一的子节点的类型必须是E。注意：子节点不包含文本节点
五．伪元素
E:first-line 匹配E元素中的第一行文本
E:first-letter 表示E元素中的第一个字符
E::selection表示E元素在用户选中文字时
E::before 生成内容在E元素前
E::after 生成内容在E元素后
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title><style> p{width:300px;border:1px solid #000;font:12px/30px "宋体";padding:10px;} p:first-line{ background:red;} p:first-letter{ font-size:30px;} p::selection{background:#ccc;color:#690;} p:before{ content:"before伪元素"; display:block; border:1px solid #000;} p:after{ content:"after伪元素"; display:block; border:1px solid #000;}</style></head><body> <p>两个“：：”和一个“：”css3中主要用来区分伪类和伪元素，到目前来说，这两种方式都是被接受的</p></body></html>