css 选择器再学一遍记录一下*1
作者:互联网
1 <!DOCTYPE html> 2 <html> 3 <HEAD> 4 5 <style> 6 *{font-size: 12px; padding: 5px;} 7 #css1 P{ /*优先级3*/ 8 color:blue 9 } 10 11 #css1>P{ 12 color:orange /*优先级2*/ 13 } 14 #css1 .baby{color:seagreen} /*优先级1*/ 15 16 #css1+p{color:gray} /*相邻元素选择器:只影响div后面的第一个p元素*/ 17 .codeArea{ /*源码区域的样式*/ 18 background-color: black; 19 color:chartreuse; 20 text-transform: lowercase; 21 22 padding: 10px; 23 } 24 .codeArea legend{color:black;background-color: chartreuse;font-size:small;font-weight: bold;} 25 26 /*属性选择器语法,优先级相同:后定义的会覆盖先定义的内容*/ 27 28 #div_Css2 div[class~="c1"]{ 29 color:green;/*选择有class这个属性,并且属性值中包含了c1这个值的div,并设置字体颜色为green*/ 30 } 31 #div_Css2 div[id]{ 32 color:blue;/*选择所有有id这个属性的div,并设置字体颜色为blue*/ 33 } 34 35 #div_Css2 div[id="Dc01"]{ 36 color:red;/*选择有id这个属性,并且ID为Dc01的div,并设置字体颜色为red*/ 37 } 38 39 #div_Css2 div[id*="c0"]{ 40 color:yellow;/*选择有id这个属性,并且ID的值中包含了c0这2个字符的div,并设置字体颜色为yellow,背景色为slategray*/ 41 background-color: slategray; 42 43 } 44 45 #div_Css2 div[id|="Dc01"]{ 46 color:tan;/*选择有id这个属性,并且ID的值中包含了c0这2个字符的div,并设置字体颜色为yellow,背景色为slategray*/ 47 background-color: black; 48 49 } 50 51 52 53 54 55 </style> 56 </HEAD> 57 <BODY> 58 <fieldset class="codeArea" > 59 <legend>后代选择器,子选择器,相邻选择器</legend> 60 <code class=""> 61 #css1 P{ /*后代选择器,DIV下面所有子级中的P元素,且不分层级:优先级3*/ 62 color:blue 63 } 64 <br> 65 #css1>P{ 66 color:orange /*指定了HTML标签的子选择器:优先级2*/ 67 } 68 <br> 69 70 #css1 .baby{color:seagreen} /*指定了class属性的子选择器:优先级1*/ 71 <br> 72 #css1+p{color:gray} /*相邻元素选择器:只影响div后面的第一个p元素*/ 73 <br> 74 .codeArea{ /*源码区域的样式*/ 75 background-color: black; 76 color:chartreuse; 77 text-transform: lowercase; 78 margin: 10px; 79 padding: 10px; 80 } 81 </code> 82 </fieldset> 83 <DIV id="css1"> 84 <P>我在DIV,id 是 #css1的里面,第一个,是DIV的亲儿子,用到了DIV>P 这个样式</P> 85 <P>我在DIV,id 是 #css1的里面,第二个,是DIV的亲儿子,用到了DIV>P 这个样式</P> 86 <P class="baby">我在DIV,id 是 #css1的里面,第三个,是他的亲儿子,但我有指定class为baby,我是一个倍受宠爱的儿子,所以我额外享受了#css1 .baby这个指定的样式</P> 87 <fieldset> 88 <p>我在DIV子元素fieldset的里面,是fieldset的第一个p元素,同时也是DIV,id 是 #css1的后代,所以用到了后代选择器DIV P这个样式</p> 89 </fieldset> 90 </DIV> 91 <P>我在DIV,id 是 #css1的外面,第一个p标签,是DIV的邻居,用到了div+p 这个样式</P> 92 <P>我在DIV,id 是 #css1的外面,第二个p标签,已经不是DIV,id 是 #css1的邻居了,整个页面都没有管我,所以我就是默认的黑色了</P> 93 <hr> 94 95 <fieldset class="codeArea" > 96 <legend>属性选择器</legend> 97 <code > 98 /*属性选择器语法,优先级相同:后定义的会覆盖先定义的内容*/ 99 <br> 100 #div_Css2 div[class~="c1"]{ 101 color:green;/*选择有class这个属性,并且属性值中包含了c1这个值的div,并设置字体颜色为green*/ 102 } <br> 103 #div_Css2 div[id]{ 104 color:blue;/*选择所有有id这个属性的div,并设置字体颜色为blue*/ 105 } <br> 106 107 #div_Css2 div[id="Dc01"]{ 108 color:red;/*选择有id这个属性,并且ID为Dc01的div,并设置字体颜色为red*/ 109 } <br> 110 111 #div_Css2 div[id*="c0"]{ 112 color:yellow;/*选择有id这个属性,并且ID的值中包含了c0这2个字符的div,并设置字体颜色为yellow,背景色为slategray*/ 113 background-color: slategray; 114 115 } <br> 116 117 #div_Css2 div[id|="Dc01"]{ 118 color:tan;/*选择有id这个属性,并且ID的值中包含了c0这2个字符的div,并设置字体颜色为yellow,背景色为slategray*/ 119 background-color: black; 120 121 } <br> 122 123 124 125 <br> 126 127 </code> 128 </fieldset> 129 <div id="div_Css2"> 130 <div id="Dc01" class="c1 c2 c3">我有一个ID属性,class="c1 c2 c3",id="Dc01" </div> 131 <div id="Dc02" class="c1 c3">我有一个ID属性class="c1 c3"</div> 132 <div id="Dc03" class="c1 c2 ">我有一个ID属性 class="c1 c2 "</div> 133 <div class="c1 c2 ">我没有ID属性,我有一个ID属性class="c1 c2 "</div> 134 <div>我没有ID属性,也没有class属性</div> 135 <div id="Dc01-01" >我有一个ID属性,id="Dc01-01" </div> 136 <div class="c11 c2">我没有ID属性,class="c11 c2"</div> 137 <div class="c1 c2">我没有ID属性,class="c1 c2"</div> 138 </div> 139 </BODY> 140 </html>
标签:css1,再学,color,DIV,id,div,选择器,css,属性 来源: https://www.cnblogs.com/allone/p/15216753.html