html css學習筆記-派生選擇器 id選擇器 類選擇
阿新 • • 發佈：2018-12-25
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style type="text/css"> /*<!--派生選擇器-->*/ li strong{ color: red;; } /*已經定義過的strong不會愛到影響 ; 並不會影響了li在顏色*/ strong{ color:deeppink; } #textp{ color: lightblue; } /*id與派生選擇器同時使用*/ #pid a{ color: palegoldenrod; } .pclass{ color: red; } /*類選擇與派生選擇器同時使用*/ .pclass a{ } /*屬性選擇器*/ [title]{ color: #FF0000; } /*屬性與值選擇器*/ [title=te]{ color: lightpink; } </style> </head> <body> <!-- css基本語法： selector{property:volue} 如：h1{color:red} 如果屬性大於一個，屬性之間用分號隔開;如果單個屬性的值多於一個單詞，屬於用引號括起來 --> <!-- 1，選擇器的分組：用逗號分開 2,繼承:如果自己定義了則引用自己的樣式，如果自己沒有定義，則引用父節點樣式 --> <!-- 派生選擇器：通過依據元素在其位置的上下文關係來定義樣式 --> <p><strong>this is test p</strong></p> <ul> <li><strong>li label</strong></li> </ul> <!-- id選擇器：# id選擇器通常與派生選擇器一起使用 --> <div id="divid"> 這是第一個div </div> <p id="textp">text p</p> <p id="pid">this is a <a href="">www.baidu.com</a></p> <!-- 類選擇： 類選擇與可用做派生選擇器，也可與派生選擇器結合使用 --> <p class="pclass"> this is class with <a href="">baidu.com</a> </p> <div class="divclass"> hello divclass...</div> <!-- 屬性選擇器：對帶有指定屬性的html元素設定樣式 屬性與值選擇器： --> <p>屬性選擇器</p> </body> </html>