02CSS選擇器06
阿新 • • 發佈：2018-02-04
sre doc lang selector char 之間 one body 瀏覽器中
day06
CSS規則由兩部分構成：選擇器，聲明
CSS選擇器
標簽選擇器
以HTML標簽作為選擇器
類選擇器
為HTML標簽添加class屬性
通過類選擇器來為具有此class屬性的元素設置CSS樣式
可對不同類型元素的同一個名稱的類選擇器設置不同的樣式規則：p.red{} and h1.red{}
同一個元素可以設置多個類，之間有空格隔開
ID選擇器
為HTML標簽添加ID屬性
通過ID選擇器來為具有此ID的元素設置CSS規則
全局選擇器
所有標簽設置樣式
群組選擇器
集體統一設置樣式
後代選擇器
使用後代選擇器，之間用空格隔開
class與id的值是區分大小寫的
偽類選擇器
偽類選擇器定義特殊狀態下的樣式
無法用標簽，id，class及其它屬性實現
鏈接偽類
:link 未訪問狀態
:visited 已訪問狀態
:hover 鼠標懸浮狀態
:active 激活狀態
註意寫的順序：:link>:visited>:hover>:active
案例：
css_selectors.html:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css選擇器</title> <style type="text/css"> /*h1,#three,p.special{font-size: 50px} p{color: red;} .special{color: blue;} .one{text-decoration: underline;} #two{color:green;} *{background-color: black;}*/ .classred{color: red;} p em{color: blue;} h1.special em{color: orange;} em{color: :red;} </style> </head> <body> <h1 class="special"><em>CSS</em>是什麽</h1> <p><em>CSS</em>層疊樣式</p> <p class="special one">用於定義HTML內容再瀏覽器中的顯示樣式</p> <p><em>CSS</em>樣式由選擇器和聲明組成</p> <div> <h1 id="two"><em>CSS</em>使用方法</h1> <ul id="three"> <li>行內樣式</li> <li>內部樣式</li> <li>外部樣式</li> <li>導入式</li> </ul> <h1><em>CSS</em>選擇器</h1> <ul> <li>標簽選擇器</li> <li>ID選擇器</li> <li>類選擇器</li> <li>後代選擇器</li> </ul> </div> </body> </html>
css_selectors1.html:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css選擇器</title> <style type="text/css"> /*a:link{color: red;} a:visited{color: black;} a:hover{color: green;} a:active{color: gray;}*/ p.a:link{color: #123123;} p.a:visited{color: #213543;} p.a:hover{color: #64f433} p.a:active{color: red;} p:hover{font-size: 50px;} p:active{font-size: 30px;} </style> </head> <body> <a href="http://www.baidu.com" target="_blank">百度</a> <br> <p><a href="http://www.baidu.com" target="_blank">百度</a></p> <p>wefdfadf</p> </body> </html>
02CSS選擇器06