CSS3选择器介绍
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>?
轉載于:https://www.cnblogs.com/lgxlsm/p/5745333.html
總結
- 上一篇： 线程令牌
- 下一篇： HDU - 1875 畅通工程再续