css样式在html中有三种存在形态:
三者的优先级为:内联样式>内部样式>外联样式。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .p1{ background-color: yellow; } p{ background-color: red; } #p2{ background-color: #006400; } p#p2{ background-color: #9ACD32; } </style> </head> <body> <!-- 当使用不同的选择器,选中同一个元素时兵设置相同的样式时,这时 样式之间产生了冲突,最终到底采用那个选择器定义的样式,由选择器 的优先级(权重)优先级高的优先显示。 优先级规则: 内联样式, 优先级 1000 id选择器, 优先级 100 类和伪类, 优先级 10 元素选择器,优先级 1 通配*, 优先级 0 继承的样式,没有优先级 当选择器中包含多中选择器时,需要将多种选择器的优先级相加然后比较, 但是注意,选择器优先级计算不会超过他的最大的数量级,如果选择器的优先级一样, 则使用靠后的样式。 并集选择器的优先级是单独计算 div , p , #p1 , .hello{} 可以在样式的最后,添加一个!important,则此时该样式将会获得一个最高的优先级, 将会优先于所有的样式显示甚至超过内联样式,但是在开发中尽量避免使用 !important --> <p class="p1">我是一个段落</p> </body> </html>