<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="css/demo-02.css">
<title>常用选择器与优先级</title>
</head>
<body>
<!--样式写在
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="css/demo-02.css">
<title>常用选择器与优先级</title>
<style>
h2{background-color: black;color: blanchedalmond;}
.s1 {
background-color: blueviolet;
color: burlywood;
}
#s1{
background-color: brown;
color: aliceblue;
}
</style>
</head>
<body>
<!--样式写在标签中-->
<h3 style="background-color:aqua;color:beige;">样式规格=选择器+声明</h3>
<!--样式标签单写-->
<h2>用style单写样式标签</h2>
<h2 class="s1">再此添加类选择器</h2>
<h2 class="s1" id="s1">再此添加类选择器的基础上添加id选择器</h2>
<h2 class="s1" id="s1" style="background-color:antiquewhite;color:black;">再此添加类选择器的基础上添加id选择器,再添加style样式</h2>
<h4>这里是引入外部css样式</h4>
</body>
</html>
<!--
demo-02.css
h4{background-color: blue; color: cornsilk;}
-->
*重点：在cs选择器中的优先级为：
1.如果将css写在当前html文档中的style标签中，此格式只适用于当前文档；
2.类选择器的优先级高于标签选择器
3.id选择器的优先级高于类选择器
4.内联样式style标签的优先级高于id优先级
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
收藏
