样式的优先级
相同样式优先级,内部样式和外部样式,单一样式优先级,!important,标签+类与单类,分组优先级和包含优先级几种情况分别讲解样式的优先级
相同样式优先级
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>相同样式的优先级</title>
<style>
.content{ color: cyan;}
.content{ color: darkmagenta;}
</style>
</head>
<body>
<p class="content">这是一个段落</p>
</body>
</html>
当设置相同样式时,后面的样式优先级高,但不建议出现重复设置样式的情况。
内部样式与外部样式
内部样式与外部样式
内部样式与外部样式优先级相同,如果都设置啦相同样式,那么后写的引入方式优先级高。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>内部样式与外部样式</title>
<link rel="stylesheet" type="text/css" href="style.css">
<style>
/*优先级高于style.css中的content样式*/
.content{ color: darkmagenta;}
</style>
</head>
<body>
<p class="content">这是一个段落</p>
</body>
</html>
单一样式优先级
Style行间样式>id选择符>class选择符>tag选择符>默认继承
Tag选择符与默认继承优先级比较,tag选择符的优先级高于默认继承
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>单一样式的优先级</title>
<style>
div{ color: blueviolet;}
p{ color: cyan;}
</style>
</head>
<body>
<p class="content">这是一个段落</p>
</body>
</html>
Tag选择符大于默认选择符
Class选择符与tag选择符优先级比较,class选择符的优先级比tag选择符的优先级高。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>class选择符大于默认继承</title>
<style>
div{ color: cyan;}
p{ color: chocolate;}
.active{ color: chartreuse;}
</style>
</head>
<body>
<p class="active">这是一个段落</p>
</body>
</html>
Class选择符大于tag选择符
Id选择符与class选择符优先级比较。Id选择符的优先级比class选择符优先级高。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>样式的优先级</title>
<style>
div{ color: blueviolet;}
p{ color: blueviolet;}
.active{ color: cadetblue;}
#content{ color: chartreuse;}
</style>
</head>
<body>
<p id="content" class="active">这是一个段落</p>
</body>