后代選擇器
祖先元素 后代元素{ }
子元素選擇器（直接子元素選擇器）
父元素>子元素{ }
兄弟選擇器
元素+兄弟元素（緊鄰該元素之后的下一個兄弟元素）
所有兄弟元素選擇器
元素~兄弟元素（該元素之后的所有兄弟元素）
<!DOCTYPE html> <html lang="en" manifest="index.manifest"> <head> <meta charset="UTF-8"> <title>Document</title> <style> div+article{color:red;} </style> </head> <body> <div>這是div</div> <article>這是article</article> <article>這是article</article> </body> </html>
<!DOCTYPE html> <html lang="en" manifest="index.manifest"> <head> <meta charset="UTF-8"> <title>Document</title> <style> div~article{color:red;} </style> </head> <body> <div>這是div</div> <article>這是article</article> <article>這是article</article> </body> </html>
屬性選擇器
元素[屬性]
選擇所有帶指定屬性的元素
元素[屬性=值]
選擇所有帶指定屬性，并且指定屬性值的元素
元素[屬性~=值]
選擇所有帶指定屬性，并且屬性所包含的某個單詞為指定屬性值的元素
元素[屬性*=值]
選擇所有帶指定屬性，并且屬性所包含的某個單詞或者字母為指定屬性值的元素
元素[屬性^=值]
選擇所有帶指定屬性，并且屬性以指定值開頭的元素，開頭可以是一個完整的單詞，也可以是單個字母
元素[屬性$=值]
選擇所有帶指定屬性，并且屬性以指定值結尾的元素，結尾可以是一個完整的單詞，也可以是單個字母
元素[屬性|=值]
選擇所有帶指定屬性，并且屬性值為指定值，或者屬性值以指定值-開頭（在js中常常使用到）
<!DOCTYPE html> <html lang="en" manifest="index.manifest"> <head> <meta charset="UTF-8"> <title>Document</title> <style> a[class]{font-weight:bold;} a[]{color:red;} a[class~="two"]{text-decoration: underline;} a[class^="one"]{font-style:italic;} a[class$="two"]{border-top:1px solid red;} a[class*="two"]{border-bottom:1px solid red;} a[class|="four"]{border-left:1px solid purple;} </style> </head> <body> <a class="one">鏈接</a> <a class="one two">鏈接</a> <a class="three one two">鏈接</a> <a class="one~">鏈接</a> <a class="threetwo">鏈接</a> <a class="four">鏈接</a> <a class="four-oo">鏈接</a> </body> </html>
動態偽類
:link :visited :hover :active :focus
<!DOCTYPE html> <html lang="en" manifest="index.manifest"> <head> <meta charset="UTF-8"> <title>Document</title> <style> a:link{color:red;} a:visited{color:blue;} a:hover{color:orange;} a:active{color:green;}
input:hover{background-color: orange;} input:focus{background-color: #abcdef;} </style> </head> <body> <a href="#">鏈接</a> <br> <input type="text"> </body> </html>
UI元素狀態偽類
:enabled :disabled :checked
<!DOCTYPE html> <html lang="en" manifest="index.manifest"> <head> <meta charset="UTF-8"> <title>Document</title> <style> input:enabled{background-color: red;} input:disabled{background-color: orange;} input:checked{width:100px;height:100px;} </style> </head> <body> <input type="text"><br> <input type="text" enabled><br> <input type="text" disabled><br> <input type="checkbox" name="number" value="1">1 <input type="checkbox" name="number" value="2">2 <input type="checkbox" name="number" value="3">3 </body> </html>
結構選擇器
ele:first-child
滿足某一個父元素的第一個子元素是指定元素
如section的第一個子元素，并且是div元素
<!DOCTYPE html> <html lang="en" manifest="index.manifest"> <head> <meta charset="UTF-8"> <title>Document</title> <style> section>div:first-child{color:red;} </style> </head> <body> <section> <div>1</div> <div>2</div> <div>3</div> </section> <section> <p>1</div> <div>2</div> <div>3</div> </section> <section> <div>a</div> <div>b</div> <div>c</div> </section> </body> </html>
:last-child :nth-child(n)同理
:nth-child(數字) 某個位置
:nth-child(n) 所有
:nth-child(odd) 奇數
:nth-child(even) 偶數
:nth-child(計算式) 指定計算式（n的取值從0開始）
<!DOCTYPE html> <html lang="en" manifest="index.manifest"> <head> <meta charset="UTF-8"> <title>Document</title> <style> li:nth-child(1){list-style: none;} li:nth-child(n){font-weight:bold;} li:nth-child(odd){color:pink;} li:nth-child(even){color:#abcdef;} li:nth-child(3n+1){text-decoration: underline;} </style> </head> <body> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> </ul> </body> </html>
nth-last-child() 同理
nth-of-type() 計數時會跳過非指定元素
<!DOCTYPE html> <html lang="en" manifest="index.manifest"> <head> <meta charset="UTF-8"> <title>Document</title> <style> li:nth-child(4){color:orange;} /*li的父元素的第4個子元素，且為li*/ li:nth-of-type(4){background-color: #abcdef;}/* li的父元素的li子元素中的第4個*/ </style> </head> <body> <ul> <li>1</li> <li>2</li> <li>3</li> <p>4</p> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> </ul> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> </ul> </body> </html>
nth-last-of-type() 同理
first-of-type() last-of-type()
:only-child 作為唯一子元素
:only-of-type 指定型別的唯一子元素，可以有其他型別
<!DOCTYPE html> <html lang="en" manifest="index.manifest"> <head> <meta charset="UTF-8"> <title>Document</title> <style> p:only-child{color:orange;} p:only-of-type{background-color: #abcdef;} </style> </head> <body> <ul> <li>1</li> <li>2</li> <li>3</li> <p>4</p> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> </ul> <ul> <p>1</p> </ul> </body> </html>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/77855.html
標籤：Html/Css
上一篇：H5網頁布局+css代碼美化
下一篇：CSS3結構類選擇器補充