CSS基礎第二篇之選擇器
我這裏就簡單舉例9種常用選擇器：
1、通配符選擇器
說明：為頁面上的所有元素設置樣式。優先級最低。
*{ margin:0; padding:0; }
2、元素選擇器
說明：也叫標簽選擇器，根據元素名（標簽名）來設置樣式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> p{ width:200px; height:auto; color:red; } div{ width:100px; height:100px; background:blue; } </style> </head> <body> <p>web前端開發工程師</p> <div> Java開發工程師 </div> </body> </html>
3、類選擇器
說明：為含有相同類名的元素設置樣式，元素選擇時，需要在元素之前加“.”號。
<style> .s1{ color:red; } </style> <body> <p class=‘s1‘>aa</p> <p class=‘s2‘>bb</p> <p class=‘s1 s2‘>cc</p><!----aa和cc的字體顏色為紅色----> </body>
4、ID選擇器
說明：#ID名{屬性名：屬性值；屬性名：屬性值}，ID選擇器具有唯一性
<style> #d1{ color:red; } </style> <body> <p id=‘d1‘>aa</p> <p id=‘d2‘>bb</p> <!----aa的字體顏色為紅色----> </body>
5、屬性選擇器
①簡單屬性選擇器：選擇具有某個屬性名的元素
說明：[元素屬性名]{屬性名：屬性值；屬性名：屬性值} 選擇有指定屬性名的元素，而不管元素的該屬性的屬性值是什麽
<style> [href]{ color:red; } </style> <body> <a href=‘taobao‘>taobao</a> <div> <a href=‘baidu‘>baidu</a> </div> <a href=‘tencent‘ >tencent</p> <!----taobao baiidu和tencent的字體顏色均為紅色----> </body>
②具體屬性值選擇器：選擇具有指定屬性鍵值對（屬性名和屬性值都要匹配）的元素。
說明：[元素屬性="屬性值"]{屬性名：屬性值；屬性名：屬性值；} 屬性名和屬性值要完全匹配
<style> [href=‘taobao‘]{ color:red; } </style> <body> <a href=‘taobao‘>taobao</a> <div> <a href=‘baidu‘>baidu</a> </div> <a href=‘tencent‘ >tencent</p> <!----taobao的字體顏色均為紅色----> </body>
③子串匹配屬性選擇器：可以規定屬性值包含什麽字符串(*)或以什麽字符串開頭(^)/結尾($)
說明：[元素屬性^="def"]{屬性名：屬性值；屬性名：屬性值；} 相應的屬性值以def開頭的元素
[元素屬性$="def"]{屬性名：屬性值；屬性名：屬性值；} 相應的屬性值以def結尾的元素
[元素屬性*="def"]{屬性名：屬性值；屬性名：屬性值；.} 相應的屬性值包含def的元素
<style> .s1 p{ color:red; } </style> <body> <p>aa</p> <div class=‘s1‘> <p>bb</p> <div> <p>cc</p> </div> <p>dd</p> </div> <p >ee</p> <!----bb、cc和dd的字體顏色為紅色----> </body>
6、子選擇器
說明：父元素>子元素{屬性：屬性值}，此表示為第一代子元素。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> p>span{ color:red; } p span{ color:blue; } p>span>span{ color:green; } </style> </head> <body> <p> <span> C++工程師 <span> <span> web前端開發工程師 </span> </span> </span> </p> <p><span>嵌入式軟件工程師<span>Java開發工程師</span></span></p> </body> </html>
註：特別註意這裏p span代表span以及後面所有子元素，而p>span只代表p的第一span子元素，同理p>span>span代表p的孫子級元素。
7、偽元素選擇器
說明：通過添加一些實際的元素來向匹配selector選擇器的元素添加一些效果，有以下5種類型。
1、:first-line或::first-line偽元素，用於向文本的首行設置特殊樣式
2、:first-letter或::first-letter偽元素，用於向文本的首字母設置樣式
3、:before或::before在元素之前添加內容
4、:after或::after在元素之後添加內容
5、::selection設置元素在被選擇時的樣式
註：在CSS3之前，偽元素只有1~4四種（::selection為新增），且均為單冒號(：)，為了和偽類選擇器進行區分，CSS3中規定，偽元素一律使用（::）雙冒號，但但冒號依然可以使用，且兼容性更好
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> p{ font-size:25px; } .s1 p::first-line{ color:red; font-style: italic; } .s2 p::first-letter{ color:green; font-weight:bold; } .s3 p::before{ content:"我們生來就孤獨"; color:rgb(0, 255, 76); } .s4 p::after{ content:"我是街上的遊魂，誰是聞到我的人？"; color:blueviolet; } .s5 p::selection{ color:green; background:red; } </style> </head> <body> <div class="s1"> <h1>我把新買的iPhoneX放在鋼琴上</h1> <p> 我同學看到後說：真能裝！把手機放在這麽顯眼的位置。我笑了笑說：我彈著80萬的鋼琴 </p> </div> <div class="s2"> <h1>你卻只看到一個1萬塊錢的手機</h1> <p> 我媽媽對我說：你住著5千萬的別墅，卻眼裏只有鋼琴 </p> </div> <div class="s3"> <h1>爸爸對我媽媽說</h1> <p>你享有身價500億的老公</p> </div> <div class="s4"> <h1>卻眼裏只有個破別墅！</h1> <p>呵呵噠</p> </div> <div class="s5"> <h1>我笑著對你說：我給你看神評論</h1> <p>而你卻糾結我是不是在騙贊！眼界決定境界，格局決定結局，謝謝！！</p> </div> </body> </html>
8、偽類選擇器
關於偽類和偽元素的區別，推薦一篇博客文章，寫的很好
9、群組選擇器
說明：selector1,selector2,selector3{......}
<style> .s1,p{ color:red; } </style> <body> <p>aa</p> <span class=‘s1‘>bb</span> <a>cc</a> <!----aa和bb的字體顏色為紅色----> </body>
CSS基礎第二篇之選擇器