.colored p{
color: red;
}
article > .colored{
color:powderblue;
}
.blue{
color: white;
}
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="colored">
<p>hello</p>
<p class="blue">hello</p>
<div>
<p>hello</p>
</div>
</div>
<p>hello</p>
<article>
<div class="colored">hello</div>
</article>
</body>
</html>为什么不应用蓝色选择器？？？当我更改它时应用（p.blue）。我不知道第一种情况和第二种情况的区别..
第二种情况是，p标签具有父类彩色，这就是为什么它将父类的CSS应用于第二个p标签的原因。即使您提供了类blue，但父类仍然具有较高的优先级。
您可以对类blue中的color属性使用！important覆盖优先级。 ！important指令具有所有优先级因素中最高的优先级。
.colored p{
color: red;
}
article > .colored{
color:powderblue;
}
.blue{
color: green!important;
}
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="colored">
<p>hello</p>
<p class="blue">hello</p>
<div>
<p>hello</p>
</div>
</div>
<p>hello</p>
<article>
<div class="colored">hello</div>
</article>
</body>
</html>