標簽選擇器：（范圍比較大）
* 通配符選擇器，全部選擇器
h1,h2,p,div... 標簽選擇器
類與ID選擇器：
.class 類選擇器
#id ID選擇器
注意：ID選擇器是唯一的，范圍比較小，個人不建議使用id來定義樣式，建議使用class
多類樣式宣告：
結構選擇器：
<!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> /* 后代選擇器 */ main article h2{ color:red; } /* 直接子元素選擇器 */ main article>h2{ background:pink; } /* 兄弟選擇器，取后面不取前面 */ article h1~h2{ text-decoration: underline; } /* 緊挨著的兄弟選擇器，取后面不取前面 */ article h1+h2{ font-size:12px; } </style> </head> <body> <main> <article> <h1>h1</h1> <h2>h2</h2> <aside> aside <h2>aside-h2</h2> </aside> <h2>h2</h2> </article> </main> </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> h1[title][id]{ color:red; } /* 指定屬性值 */ h1[title='cyy']{ background:pink; } /* 指定值開始 */ h1[title^='cyy']{ text-decoration: underline; } /* 指定值結束 */ h1[title$='cyy']{ font-size:12px; } </style> </head> <body> <main> <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> <h2>h2</h2> <aside> aside <h2>aside-h2</h2> </aside> <h2>h2</h2> </article> </main> </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> /* 指定值出現在任意位置 */ h1[title*='cyy']{ font-size:12px; } /* 指定值出現在任意位置，獨立詞兩邊有空格 */ h1[title~='cyy']{ color:red; } /* 單獨的指定值本身，或者后面跟著中劃線 */ h1[title|='cyy']{ background:pink; } </style> </head> <body> <main> <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> </article> </main> </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> a:link{ color:red; } a:visited{ color:yellow; } a:hover{ color:green; } a:active{ color:orange; } input:focus{ background:yellow; outline:none; } input:active{ background:pink; } input:hover{ color:red; } </style> </head> <body> <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> </article> </main> </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> main{ height:1000px; } /* 錨點目標 */ div:target{ color:red; } /* 根元素 */ html{ color:yellow; } /* 根偽類元素 */ :root{ background:lightblue; } /* 空元素 */ li:empty{ display:none; } </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> </article> </main> <div id="cyy">cyy</div> </body> </html>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/203954.html
標籤：其他
上一篇：css3參考方式_樣式組件設計與匯入技巧_vscode添加LESS支持 -cyy
下一篇：多媒體與表格實戰 -cyy