1.css3属性选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css3属性选择器</title> <style type="text/css"> /* id包含div字符串*/ [id*=div] { color: lime; } /*开始字符串为div*/ [id^=div] { color: red; } /*结束字符串为div*/ [id$=div] { color: blue; } </style> </head> <body> <div> <div id="div1">11</div> <div id="2div2">22</div> <div id="3div3">33</div> <div id="44div">44</div> <div id="wowo">55</div> </div> </body> </html>
2.css3结构伪类选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css3结构伪类选择器</title> <style type="text/css"> /* 第一行*/ body>p:first-line { color: aqua; } /* 首字母*/ body>p:first-letter { color: red; } /*元素前插入内容*/ li:before { content: "--"; color: yellow; } /*元素后插入内容*/ li:after { content: "++"; color: green; } /*根元素*/ :root { background: darkgrey; } /*排除*/ div *:not(h1) { background: green; } /*为空*/ .bb li:empty { background: green; } /*业内跳转目标*/ :target { background: orange; } </style> </head> <body> <p> 我是第一行 <br> 我是第二行 </p> <ul> <li class="aa">1</li> <li>2</li> <li class="aa">3</li> <li class="aa">4</li> </ul> <ul class="bb"> <li>1</li> <li></li> <li>3</li> <li></li> <li>5</li> <li></li> </ul> <div> <h1>111</h1> <h2>222</h2> <h3>333</h3> </div> <a href="#a1">111</a> <a href="#a2">222</a> <a href="#a3">333</a> <div id="a1">a1</div> <div id="a2">a2</div> <div id="a3">a3</div> </body> </html>
3.css3选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css3选择器</title> <style type="text/css"> /*第一个元素*/ li:first-child { background-color: yellow; } /*最后一个元素*/ li:last-child { background-color: blue; } /*上到下第几个*/ li:nth-child(2) { background-color: #666; } /*下到上第几个*/ li:nth-last-child(2) { background-color: #888; } /*基数*/ li:nth-child(odd) { color: red; } /*偶数*/ li:nth-child(even) { color: #999; } /*只算同类元素*/ .aa h3:nth-of-type(2), .aa h4:nth-of-type(2) { color: red; } /*样式循环*/ .bb li:nth-child(4n+1) { background-color: #111; } .bb li:nth-child(4n+2) { background-color: #222; } .bb li:nth-child(4n+3) { background-color: #333; } .bb li:nth-child(4n) { background-color: #444; } /*只有一个元素*/ li:only-child { background-color: green; } </style> </head> <body> <ul> <li>11</li> <li>22</li> <li>33</li> <li>44</li> <li>55</li> <li>66</li> <li>77</li> <li>88</li> </ul> <div class="aa"> <h3>111</h3> <h4>222</h4> <h3>111</h3> <h4>222</h4> <h3>111</h3> <h4>222</h4> <h3>111</h3> <h4>222</h4> <h3>111</h3> <h4>222</h4> </div> <div class="bb"> <ul> <li>11</li> <li>22</li> <li>33</li> <li>44</li> <li>11</li> <li>22</li> <li>33</li> <li>44</li> <li>11</li> <li>22</li> <li>33</li> <li>44</li> <li>11</li> <li>22</li> <li>33</li> <li>44</li> </ul> </div> <ul> <li>11</li> </ul> </body> </html>
4.UI元素状态伪类选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>UI元素状态伪类选择器</title> <style type="text/css"> /*hover鼠标在控件上*/ input[type="text"]:hover { background-color: darkviolet; } /*focus获取焦点*/ input[type="text"]:focus { background-color: aqua; } /*active鼠标按住*/ input[type="text"]:active { background-color: #666; } /*checked已选择状态*/ input[type="checkbox"]:checked { outline: 2px solid gold; } /*enabled可用*/ .aa input[type="text"]:enabled { background: yellow; } /*disabled不可用*/ .aa input[type="text"]:disabled { background: red; cursor: pointer; } </style> </head> <body> <input type="text" name="name"> <input type="text" name="age"> <input type="checkbox">111 <input type="checkbox">222 <input type="checkbox">333 <div class="aa"> <input type="text" name="name" id="t1"> <input type="text" name="age" id="t2" disabled> </div> </body> </html>
5.通用兄弟选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>通用兄弟选择器</title> <style type="text/css"> /*跟在div后面的p元素*/ div~p { background: gold; } </style> </head> <body> <div> <div> <p>div的子元素p</p> <p>div的子元素p</p> </div> <p>div相邻元素p</p> <p>div相邻元素p</p> <h4>----------</h4> <div> <p>div的子元素p</p> </div> <p>div相邻元素p</p> <p>div相邻元素p</p> </div> <p>div相邻元素p</p> <p>div相邻元素p</p> </body> </html>