首尾元素偽類選擇
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="keywords" content="關鍵詞1，關鍵詞2，關鍵詞3"> <meta name="description" content="網站描述bla bla"> <title>網站標題</title> <style> article :first-child{ background:Pink; } article>:first-child{ color:red; } article h1:first-child{ font-style:italic; } article h2:last-child{ color:orange; } article h2:last-of-type{ background-color:rgb(182, 145, 182); } </style> </head> <body> <a href="#cyy">cyy</a> <ul> <li>111</li> <li></li> </ul> <main> <a href="http://www.baidu.com" target="_blank">baidu</a> <input type="text" value="111"> <article> <h1 title id>h1-title-id</h1> <h1 title='cyy'>h1-title</h1> <h1 title='cyyhahaha'>h1-title</h1> <h1 title='cyyhahahacyy'>h1-title</h1> <h1 title='cyyhahaha cyy'>h1-title</h1> <h1 title='cyy hahahacyy'>h1-title</h1> <h1 title='cyy-hahaha cyy'>h1-title</h1> <h2>h2</h2> <aside> aside <h2>aside-h2</h2> </aside> <h2>h2</h2> <div>111</div> </article> </main> <div id="cyy">cyy</div> </body> </html>
last-child和last-of-type的區別：
:last-child表示其父元素的最后一個子元素，且這個元素是css指定的元素，才可以生效，
:last-of-type表示其父元素下的最后一個指定型別的元素，
偽類選擇唯一子元素：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="keywords" content="關鍵詞1，關鍵詞2，關鍵詞3"> <meta name="description" content="網站描述bla bla"> <title>網站標題</title> <style> article :only-child{ background:Pink; } article>div:only-of-type{ color:red; } </style> </head> <body> <a href="#cyy">cyy</a> <ul> <li>111</li> <li></li> </ul> <main> <a href="http://www.baidu.com" target="_blank">baidu</a> <input type="text" value="111"> <article> <h1 title id>h1-title-id</h1> <h1 title='cyy'>h1-title</h1> <h1 title='cyyhahaha'>h1-title</h1> <h1 title='cyyhahahacyy'>h1-title</h1> <h1 title='cyyhahaha cyy'>h1-title</h1> <h1 title='cyy hahahacyy'>h1-title</h1> <h1 title='cyy-hahaha cyy'>h1-title</h1> <h2>h2</h2> <aside> aside <h2>aside-h2</h2> </aside> <h2>h2</h2> <div>111</div> </article> </main> <div id="cyy">cyy</div> </body> </html>
根據元素編號靈活選擇：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="keywords" content="關鍵詞1，關鍵詞2，關鍵詞3"> <meta name="description" content="網站描述bla bla"> <title>網站標題</title> <style> article :nth-child(1){ background:Pink; } li:nth-child(2n){ color:red; } li:nth-child(odd){ color:green; } article h1:nth-child(2){ color:purple; } article h1:nth-of-type(2){ background-color:purple; } </style> </head> <body> <a href="#cyy">cyy</a> <ul> <li>111</li> <li>111</li> <li>111</li> <li>111</li> <li>111</li> <li>111</li> <li>111</li> <li>111</li> <li>111</li> </ul> <main> <a href="http://www.baidu.com" target="_blank">baidu</a> <input type="text" value="111"> <article> <h1 title id>h1-title-id</h1> <div>111</div> <div>111</div> <h1 title='cyy'>h1-title</h1> <h1 title='cyyhahaha'>h1-title</h1> <h1 title='cyyhahahacyy'>h1-title</h1> <h1 title='cyyhahaha cyy'>h1-title</h1> <h1 title='cyy hahahacyy'>h1-title</h1> <h1 title='cyy-hahaha cyy'>h1-title</h1> <h2>h2</h2> <aside> aside <h2>aside-h2</h2> </aside> <h2>h2</h2> <div>111</div> </article> </main> <div id="cyy">cyy</div> </body> </html>
元素尾部偽類選擇：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="keywords" content="關鍵詞1，關鍵詞2，關鍵詞3"> <meta name="description" content="網站描述bla bla"> <title>網站標題</title> <style> /* 最后兩個li */ ul li:nth-last-child(-n+2){ font-weight:bold; } article h1:nth-last-of-type(2){ color:red; } </style> </head> <body> <a href="#cyy">cyy</a> <ul> <li>111</li> <li>111</li> <li>111</li> <li>111</li> <li>111</li> <li>111</li> <li>111</li> <li>111</li> <li>111</li> </ul> <main> <a href="http://www.baidu.com" target="_blank">baidu</a> <input type="text" value="111"> <article> <h1 title id>h1-title-id</h1> <div>111</div> <div>111</div> <h1 title='cyy'>h1-title</h1> <h1 title='cyyhahaha'>h1-title</h1> <h1 title='cyyhahahacyy'>h1-title</h1> <h1 title='cyyhahaha cyy'>h1-title</h1> <h1 title='cyy hahahacyy'>h1-title-ok</h1> <h1 title='cyy-hahaha cyy'>h1-title</h1> <h2>h2</h2> <aside> aside <h2>aside-h2</h2> </aside> <h2>h2</h2> <div>111</div> </article> </main> <div id="cyy">cyy</div> </body> </html>
not排除選擇器：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="keywords" content="關鍵詞1，關鍵詞2，關鍵詞3"> <meta name="description" content="網站描述bla bla"> <title>網站標題</title> <style> /* 前4個里排除第2個 */ ul li:nth-child(-n+4):not(:nth-child(2)){ color:red; } </style> </head> <body> <a href="#cyy">cyy</a> <ul> <li>111</li> <li>111</li> <li>111</li> <li>111</li> <li>111</li> <li>111</li> <li>111</li> <li>111</li> <li>111</li> </ul> <main> <a href="http://www.baidu.com" target="_blank">baidu</a> <input type="text" value="111"> <article> <h1 title id>h1-title-id</h1> <div>111</div> <div>111</div> <h1 title='cyy'>h1-title</h1> <h1 title='cyyhahaha'>h1-title</h1> <h1 title='cyyhahahacyy'>h1-title</h1> <h1 title='cyyhahaha cyy'>h1-title</h1> <h1 title='cyy hahahacyy'>h1-title-ok</h1> <h1 title='cyy-hahaha cyy'>h1-title</h1> <h2>h2</h2> <aside> aside <h2>aside-h2</h2> </aside> <h2>h2</h2> <div>111</div> </article> </main> <div id="cyy">cyy</div> </body> </html>
通過表單偽類創建個性化表單：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="keywords" content="關鍵詞1，關鍵詞2，關鍵詞3"> <meta name="description" content="網站描述bla bla"> <title>網站標題</title> <style> input:disabled{ background:pink; } input:enabled{ background:lightgreen; } input:checked+label{ color:red; } /* 必填項 */ input:required{ border:1px solid yellow; } /* 選填項 */ input:optional{ border:1px solid blue; } input:valid{ border-radius:5px; } input:invalid{ border-radius:50%; } </style> </head> <body> <form action=""> <input type="text" disabled> <input type="text"> <hr> <input type="radio" id="boy"> <label for="boy">boy</label> <input type="radio" id="girl" checked> <label for="girl">girl</label> <hr> <input type="text" required> <input type="email" name="" id=""> <button>提交</button> </form> </body> </html>
文本偽類：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="keywords" content="關鍵詞1，關鍵詞2，關鍵詞3"> <meta name="description" content="網站描述bla bla"> <title>網站標題</title> <style> p::first-letter{ color:red; } p::first-line{ color:yellowgreen; } p+span::after{ content:'hh~'; color:red; position:relative; top:30px; left:30px; } p+span::before{ content:'↓'; color:red; } .form{ border:1px solid #ddd; width:200px; margin:100px; } input[type='text']{ border:none; outline:none; } input[type='text']+span::after{ content:'?'; cursor:pointer; } </style> </head> <body> <div style="width:300px;"> <p> 這是cyy呀~這是cyy呀~這是cyy呀~這是cyy呀~這是cyy呀~這是cyy呀~這是cyy呀~這是cyy呀~這是cyy呀~這是cyy呀~這是cyy呀~這是cyy呀~這是cyy呀~這是cyy呀~這是cyy呀~這是cyy呀~這是cyy呀~這是cyy呀~這是cyy呀~這是cyy呀~這是cyy呀~這是cyy呀~這是cyy呀~這是cyy呀~這是cyy呀~這是cyy呀~這是cyy呀~這是cyy呀~這是cyy呀~這是cyy呀~這是cyy呀~這是cyy呀~這是cyy呀~這是cyy呀~這是cyy呀~這是cyy呀~這是cyy呀~這是cyy呀~這是cyy呀~這是cyy呀~這是cyy呀~這是cyy呀~這是cyy呀~這是cyy呀~這是cyy呀~這是cyy呀~這是cyy呀~這是cyy呀~ </p> <p> 這是cyy呀~這是cyy呀~這是cyy呀~這是cyy呀~這是cyy呀~這是cyy呀~這是cyy呀~這是cyy呀~這是cyy呀~這是cyy呀~這是cyy呀~這是cyy呀~這是cyy呀~這是cyy呀~這是cyy呀~這是cyy呀~這是cyy呀~這是cyy呀~這是cyy呀~這是cyy呀~這是cyy呀~這是cyy呀~這是cyy呀~這是cyy呀~這是cyy呀~這是cyy呀~這是cyy呀~這是cyy呀~這是cyy呀~這是cyy呀~這是cyy呀~這是cyy呀~這是cyy呀~這是cyy呀~這是cyy呀~這是cyy呀~這是cyy呀~這是cyy呀~這是cyy呀~這是cyy呀~這是cyy呀~這是cyy呀~這是cyy呀~這是cyy呀~這是cyy呀~這是cyy呀~這是cyy呀~這是cyy呀~ </p> <p> 這是cyy呀~這是cyy呀~這是cyy呀~這是cyy呀~這是cyy呀~這是cyy呀~這是cyy呀~這是cyy呀~這是cyy呀~這是cyy呀~這是cyy呀~這是cyy呀~這是cyy呀~這是cyy呀~這是cyy呀~這是cyy呀~這是cyy呀~這是cyy呀~這是cyy呀~這是cyy呀~這是cyy呀~這是cyy呀~這是cyy呀~這是cyy呀~這是cyy呀~這是cyy呀~這是cyy呀~這是cyy呀~這是cyy呀~這是cyy呀~這是cyy呀~這是cyy呀~這是cyy呀~這是cyy呀~這是cyy呀~這是cyy呀~這是cyy呀~這是cyy呀~這是cyy呀~這是cyy呀~這是cyy呀~這是cyy呀~這是cyy呀~這是cyy呀~這是cyy呀~這是cyy呀~這是cyy呀~這是cyy呀~ </p> <span>cyy</span> </div> <div class="form"> <input type="text"> <span></span> </div> </body> </html>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/204754.html
標籤：Html/Css
上一篇：簡易雙色球dome分享