css3属性符号选择器:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css3属性选择器</title> <style> [id*=div]{ color:red;/*id包含div的*/ } [id^=div]{ color:#0000ff;/*id首字符为div的*/ } [id$=div]{ color:green;/*id结束符为div的,数字前加上*/ } </style> </head> <body> <div id="div">测试文字</div> <div id="div1">测试文字</div> <div id="di">测试文字</div> <div id="mydiv">测试文字</div> </body> </html>
css3结构性伪类选择器root、not、empty、target:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css3结构性伪类选择器</title> <style> /*root选择器指html最外层根元素html*/ :root{ background: gray; } /*如果使用了root，body只对有内容的区域修饰*/ body{ background: green; } /*not排除功能*/ div *:not(h1){ color:#fff000; } /*empty对空的内容修饰*/ :empty{ background: royalblue; } /*target对超链接跳转之后内容修饰*/ :target{ background: rebeccapurple; color:#fff; } </style> </head> <body> <div>文字内容 <h1>标题</h1> <p>测试文字</p> <div>测试文字2</div> </div> <table border="1"> <tr> <td>单元1</td> <td>单元2</td> </tr> <tr> <td></td> <td>单元2</td> </tr> <tr> <td>单元1</td> <td></td> </tr> </table><br/> <a href="#a1">链接1</a> <a href="#a2">链接2</a> <a href="#a3">链接3</a> <div> <div id="a1"> <h1>链接一</h1> <p>内容一</p> </div> <div id="a2"> <h1>链接二</h1> <p>内容二</p> </div> <div id="a3"> <h1>链接三</h1> <p>内容三</p> </div> </div> </body> </html>
css3结构性伪类选择器first-line、first-letter、before、after:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css3结构性伪类选择器</title> <style> /*first-line:第一行*/ p:first-line{ color:#ff0000; } /*first-letter:首字符*/ p:first-letter{ color:#0000ff; } /*before:之前*/ li:before{ content: "--"; color:#ff0000; } /*after:之后*/ li:after{ content: "这是注释"; color:gray; font-size: 10px; } </style> </head> <body> <p>这是一段测试文字<br/>这是第二段测试文字</p> <div> <ul> <li>test1</li> <li>test2</li> <li>test3</li> <li>test4</li> </ul> </div> </body> </html>
css3结构性伪类选择器first-child、last-child、nth-child()、nth-last-child():
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> body{ background: #555; } /*first-child:第一个子元素*/ li:first-child{ background:#0000ff; } /*last-child:最后一个子元素*/ li:last-child{ background: #ff0000; } /*nth-child():指定的第几个子元素*/ li:nth-child(3){ background: #fff000; } /*nth-last-child():指定的倒数第几个子元素*/ li:nth-last-child(2){ background: #999999; } /*even:指定的偶数*/ li:nth-child(even){ color: #00ff00; } /*odd:指定的奇数*/ li:nth-last-child(odd){ color:#fff; } </style> </head> <body> <div> <ul> <li>这是第1列</li> <li>这是第2列</li> <li>这是第3列</li> <li>这是第4列</li> <li>这是第5列</li> </ul> </div> </body> </html>
css3结构性伪类选择器nth-child(n)及only-child:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /*nth-child(n) n=αn+β*/ li:nth-child(4n+1){ background: #0000ff; } li:nth-child(4n+2){ background: #00ff00; } li:nth-child(4n+3){ background: #999999; } li:nth-child(4n){ background: #ff0000; } /*only-child:对标签内仅有的一个子元素做修饰*/ li:only-child{ background: #000; color: #fff; } </style> </head> <body> <ul> <li>这是一段测试文字</li> </ul> <ul> <li>列表1</li> <li>列表2</li> <li>列表3</li> <li>列表4</li> <li>列表1</li> <li>列表2</li> <li>列表3</li> <li>列表4</li> <li>列表1</li> <li>列表2</li> <li>列表3</li> <li>列表4</li> <li>列表1</li> <li>列表2</li> <li>列表3</li> <li>列表4</li> <li>列表1</li> <li>列表2</li> <li>列表3</li> <li>列表4</li> </ul> </body> </html>
css3结构性伪类选择器nth-of-type、nth-last-of-type:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /*nth-of-type:同类元素做修饰*/ h2:nth-of-type(odd){ background: #fff000; } /*nth-last-of-type:同类元素倒数做修饰*/ h2:nth-last-of-type(odd){ background: #0000ff; } </style> </head> <body> <div> <h2>标题</h2> <p>文本内容</p> <h2>标题</h2> <p>文本内容</p> <h2>标题</h2> <p>文本内容</p> <h2>标题</h2> <p>文本内容</p> </div> </body> </html>
css3选择器hover、focus、active、checked:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> input[type="text"]:hover{ background: #fff000; } input[placeholder=""]:focus{ background: #ff0000; } input[type="text"]:active{ background: #0000ff; } input[type="checkbox"]:checked{ outline:2px solid #00ff00; } </style> </head> <body> <input type="text" placeholder="输入内容"> <input type="text" placeholder=""> <input type="checkbox">音乐 <input type="checkbox">听歌 </body> </html>
css3选择器enabled、disabled:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /*enabled:可输入状态*/ input[type="text"]:enabled{ background: #fff000; } /*disabled:不可输入状态*/ input[type="text"]:disabled{ background:gray; } </style> </head> <body> <script> function radio_change() { var radio1=document.getElementById("radio1"); var radio2=document.getElementById("radio2"); var text=document.getElementById("text"); if(radio1.checked){ text.disabled=""; }else{ text.value=""; text.disabled="disabled"; } } </script> <input type="radio" id="radio1" name="radio" onchange="radio_change()">可用 <input type="radio" id="radio2" name="radio" onchange="radio_change()">不可用 <input type="text" id="text" disabled> </body> </html>
css3通用兄弟元素选择器:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>通用兄弟元素选择器</title> <style> /*对div的同级元素p修饰*/ div~p{ background: #fff000; } </style> </head> <body> <div> <div> <p>我是div的子元素p</p> <p>我是div的子元素p</p> </div> <p>我是和div同级别p元素</p> <p>我是和div同级别p元素</p> </div> </body> </html>