day03-CSS( 四 ) _生活百科

文章插图
5.4组合选择器

组合选择器可以让多个选择器共用同一个css样式代码
语法格式
选择器1,选择器2,选择器n{属性:值;}

例子

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>组合选择器</title><style type="text/css">.class01, #id01 {width: 300px;height: 100px;border: 2px solid paleturquoise;color: #ff7d44;}</style></head><body><h1 class="class01">Hello，北京</h1><h1 id="id01">hello，上海</h1></body></html>

文章插图
5.5优先级说明行内样式优先级 > id选择器优先级 > class选择器优先级 > 元素选择器优先级

例子

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>选择器的优先级说明</title><style type="text/css">#id01 {color: purple;}#id02 {color: blue;}.class01 {color: red;}div {color: black;}</style></head><body><h3>选择器的优先级说明</h3><!--行内样式的优先级高于id选择器--><div style="color: #25d2be" id="id01">一只猫猫在睡觉</div><!--id选择器的优先级高于类选择器--><div id="id02" class="class01">两只猫猫在睡觉</div><!--类选择器的优先级高于元素选择器---><div class="class01">三只猫猫在睡觉</div></body></html>