<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 标签选择器 */
/* div{
color: brown;
width: 200px;
height: 200px;
border: 1px solid black;
} */
/* id选择器 */
/* 只会给取id的进行选择 ，是通过#加你给id取的名字*/
#one{
color: brown;
width: 200px;
height: 200px;
border: 1px solid black;
}
/* class选择器，与id选择器的原理一样，但是是加. */
.two{
color: blueviolet;
width: 200px;
height: 200px;
border: 1px solid black;
}
</style>
</head>
<body>
<!-- 选择器分为：基本选择器：标签选择器、id选择器、class选择器、通用选择器 -->
<!-- 标签选择器，也是写在head上，与内嵌的方式一样 -->
<div>第一个</div>
<div>第二个</div>
<div id="one">第三个</div>
<div class="two">第三个</div>
<p>这是一个p</p>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* <!-- 通用选择器，因名而作，所有选择器都行 --> */
*{
color: brown;
width: 200px;
height: 200px;
border: 1px solid black;
}
</style>
<body>
<div>第一个</div>
<div>第二个</div>
<div id="one">第三个</div>
<div class="two">第三个</div>
<p>这是一个p</p>
</body>
</html>四种选择器的优先级：id>class>标签>通用
扫一扫
3万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
