<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>选择器的优先级别</title>
<style>
p {
color: lightblue;
}
</style>
</head>
<body>
<p id="p" class="myclass">这是一个段落内容。</p>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>选择器的优先级别</title>
<style>
p {
color: lightblue;
}
.myclass {
color: lightcoral;
}
</style>
</head>
<body>
<p id="p" class="myclass">这是一个段落内容。</p>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>选择器的优先级别</title>
<style>
p {
color: lightblue;
}
.myclass {
color: lightcoral;
}
#p {
color: lightgreen;
}
</style>
</head>
<body>
<p id="p" class="myclass">这是一个段落内容。</p>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>选择器的优先级别</title>
<style>
p {
color: lightblue;
}
.myclass {
color: lightcoral;
}
#p {
color: lightgreen;
}
</style>
</head>
<body>
<p id="p" class="myclass" style="color: lightgray;">这是一个段落内容。</p>
</body>
</html>
使用 !important 提高优先级:
但是一般不建议使用,会打乱默认的优先级别。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>选择器的优先级别</title>
<style>
p {
color: lightblue !important;
}
.myclass {
color: lightcoral;
}
#p {
color: lightgreen;
}
</style>
</head>
<body>
<p id="p" class="myclass" style="color: lightgray;">这是一个段落内容。</p>
</body>
</html>