somboy 2020-06-09
<!DOCTYPE html><html lang="en"><head> <title>Title</title> <style> /*通用*/ *{ font-size: 30px; } p{ color: #5fb57d; } /**/ #p_id1{ color: #b18621; } /*类*/ .p_c1{ color: #364e98; } /*# 后代选择器*/ div p{ background: #364e98; } /* 综合练习 */ /*#id-001 .class-001 .class-003{*/ /* background: #fac237;*/ /*}*/ /*!* 子代 *! 只筛选“儿子层”*/ #id-001>.class-003{ font-size: 40px; } #id-001{ font-size: 50px; } /*并行*/ #p,#p_id1{ color: #4A154B; } /*比邻*/ #id-001+p{ color: red; } </style></head><body> <p id="p">hello p1</p> <div id="id-001"> hello div <span> hello span </span> <p>hello pp1</p> <p class="class-003">hello pp2</p> <div class="class-001">hello dd <p class="class-003">ppppp</p> </div> </div> <p id="p_id1">pp</p> <p class="p_c1">hello p3</p> <p class="p_c1">hello p4</p> <p class="p_c1">hello p5</p></body></html>