1.标签选择器:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>标签选择器</title>
<!-- 以标签名开头的选择器 -->
<!-- 特点：选中同名标签设置相同样式，无法差异化同名标签的样式 -->
<style>
p {
color: blue;
}
h1{
color: red;
}
</style>
</head>
<body>
<p>这个是一个p标签</p>
<h1>这是一个h1标签</h1>
</body>
</html>2.类选择器：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>类选择器</title>
<!-- 先定义->.类名再使用->class="类名" -->
<!-- 特点差异化标签显示的样式，查找标签，可以给多个标签使用-->
<!-- 一个标签可以使用多个标签，class属性值写多个类名,用空格隔开-->
<style>
.color{
color: brown;
}
.size{
font-size: 100px;
}
</style>
</head>
<body>
<div>这是没有使用类选择器的div标签</div>
<div class="color">这是使用了类选择器的div标签</div>
<h1 class="color size">这是使用了类选择器的h1标签</h1>
</body>
</html>3.id选择器：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>id选择器</title>
<style>
/* 类似类选择器的定义与调用 无法同个id用两个 */
#color{
color: blue;
}
#font{
font-size: 100px;
}
</style>
</head>
<body>
<div id="color">z这是一个使用了id选择器的div标签</div>
</body>
</html>4.通配符选择器:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>通配符选择器</title>
<style>
/* 无需调用定义完后自己查找所有标签应用 */
* {
color: yellow;
}
</style>
</head>
<body>
<P>这个是一个p标签</P>
<div>这是一个div标签</div>
<h1>这是一个h1标签</h1>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
