1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title></title>
6 <style>
7 /*
8 样式的冲突：
9 当我们使用不停的选择器，选中相同的元素，并且为相同的元素设>
置不同的值，此时就发生了样式的冲突
10 样式发生冲突时，应用那个样式由选择器的权重(优先级)决定
11 选择器的权重(优先级)
12 1.内联样式 1 0 0 0
13 2.id选择器 0 1 0 0
14 3.类和伪类选择器 0 0 1 0
15 4.元素选择器 0 0 0 1
16 5.统配选择器 0 0 0 0
17 6.继承的优先级 没有优先级
18 注意：比较优先级时，需要将所有的选择器的优先级进行相加计算>
，最后优先级越高，则越优先显示
19 分组选择器是单独计算优先级
20 选择器的类街不会超过其最大数量级
21 例如类选择器再高也不会超过id选择器
22 如果优先级计算后相等，此时则优先使用靠下的样式
23
24 可以在某个样式的后面添加!important,则此时该样式会获取最高的
优先级
25 */
26 div{
27 color:red;
28
29 }
30 .red{
31 color:yellow;
32
33 }
34 #box1{
35 color:green;
36 }
37 div#box1{
38 color:blue;
39 }
40 /*
41 显示效果为yellow
42 */
43 </style>
44