css層次選擇器
阿新 • • 發佈：2020-12-06
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /*p{*/ /* color: deepskyblue;*/ /*}*/ /*後代選擇器，選擇標籤內含的算有p元素*/ ul p{ background: greenyellow; } ol p{ background: darkorange; } /*子選擇器，選擇標籤包含的第一層次的p元素*/ body>p{ background: deeppink; } /*弟弟選擇器，選擇該元素同級下的第一個p元素 可以使用id定位一個元素，或類選擇器定位某類元素*/ #p1+p{ background: darkorchid; } /*通用選擇器（弟弟們選擇器），選擇同級下的所有p元素*/ .select~p{ border-radius: 20px; } </style> </head> <body> <p>p0</p> <p class="select" id="p1">p1</p> <p>p2</p> <p>p3</p> <ul> <li> <p>ul-li-p4</p> </li> <li> <p>ul-li-p5</p> </li> <li> <p>ul-li-p6</p> </li> </ul> <ol> <li> <p>ol-li-p7</p> </li> <li> <p>ol-li-p8</p> </li> <li> <p>ol-li-p9</p> </li> </ol> </body> </html>