<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>选择器分组</title> <style> a.div { color: blue; } .p1 { color: blue; } .p2 { font-size: 30px; } /*.p3 { font-style: italic; }*/ .p1.p2 { font-style: italic; } #myDiv { color: red; } [title] { color: red; } [href] { font-size: 30px; } [href="https://www.baidu.com/"] { color: lightgray; } [title~='title'] { font-size: 50px; } /*p strong { color: blue; }*/ p > strong { color: fuchsia; font-size: 30px; } p > strong > i { color: blue; font-size: 30px; } li + li { font-size: 50px; color: lightblue; } </style> </head> <body> <div class="div"> hello world </div> <a class="div">kikyo</a> <div> ============================================= </div> <p class="p1">this is a page</p> <p class="p2">this is a page</p> <p class="p1 p2">this is a page</p> <div> ============================================= </div> <div id="myDiv"> lalala </div> <div class="div2">lalala</div> <div class="div2">lalala</div> <div class="div2">lalala</div> <div> ============================================= </div> <p title="tit">哈哈</p> <p title="title">哈哈</p> <p title="t">哈哈</p> <p title="title hello">哈哈</p> <a href="https://www.baidu.com/">哈哈哈</a> <!--<p>this is my <strong>web</strong> page</p>--> <p>this is my <strong>web <i> hello</i></strong> page</p> <div> ============================================= </div> <div> <ul> <li>item1</li> <li>item2</li> <li>item3</li> </ul> <ol> <li>item11</li> <li>item22</li> <li>item33</li> </ol> </div> </body> </html>