版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/z_x_Qiang/article/details/82085380
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
p{
background-color: red;
}
.P2{
background-color: green;
}
#d1{
background-color: yellow;
}
/*
* 当不同选择器设置同一个元素的同一个属性的时候会产生冲突，这是就要考虑选择器的优先级顺序了；
* 内联样式的优先级是 1000；
* id选择器的优先级是 100；
* 类和伪类选择器的优先级是 10；
* 元素选择器的优先级是 1；
* 通配*选择器的优先级是 0；
* 继承的样式选择器 -1；
*
* 并集选择器的优先级是单独计算元素的优先级；不会混淆在一起计算；
*/
/*
* 当多条件的选择器的时候需要将多个条件的优先级相加才能得到最终的优先级；
*/
p#p2{
background-color: orange;
}
/**
* 当一个属性有多个class的时候，后面的定义的选择器生效；
*/
.c1{
background-color: orange;
}
.c2{
background-color: yellowgreen;
}
</style>
</head>
<body>
<p class="P2"
id="d1"
style="background-color: blue;">
wo shi yi ge duan luo
</p>
<p id="p2">我是一个段落</p>
<p class="c1 c2">我是一个段落</p>
</body>
</html>
超链接的伪类选择器的优先级：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*
* 其实超链接的四中伪类选择器：
* link
* visited
* hover
* active
* 这四种本身是没有优先级的，所有在写的顺序上要特别的注意，不然现在后面的会其效果；
*
*/
a:link{
color: red;
}
a:visited{
color: orange;
}
/*
* hover
* active
* 这两种状态可能会冲突，所以一定要注意编写的顺序才行；
*/
a:hover{
color: green;
}
a:active{
color: blue;
}
</style>
</head>
<body>
<a href="http://www.baidu.com">baidu</a>
<br />
<br />
<a href="http://www.baidu.com11">baidu111</a>
</body>
</html>