css 層級選擇器demo
阿新 • • 發佈：2018-12-26
入門demo
直接複製下面的程式碼，然後桌面新建資料夾啊，.txt結尾，貼上進去，改資料夾.html結尾，瀏覽器開啟，編輯除錯。
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <!--內部樣式 寫在head中--> <style type="text/css"> /* 並集選擇器 多個選擇器之間使用,（英文半形狀態）隔開 .word,#s,span{ color: green; }*/ /*交集選擇器 格式：01.標籤選擇器+類選擇器 02.標籤選擇器+ID選擇器 必須是標籤選擇器在前 div.word｛｝ 去div標籤中查詢class屬性值為 word的標籤 div#s{} 去div標籤中查詢id屬性值為 s的標籤 div.word{ color: green; } */ /* 後代選擇器 必須有層級關係 選擇器之前使空格隔開*/ #dv span { color: red; background: red; } </style> </head> <body> <div>這是一個div1</div> <div>這是一個div2</div> <div class="word">類選擇器</div> <div class="word">類選擇器</div> <div id="s">ID選擇器</div> <span>div外面的span</span> <div id="dv"> <div> <div > <span>aaaaa</span> </div> </div> </div> <div> <span>div裡面的span標籤2</span> </div> </body> </html>