<!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>
/*
将所有的段落设置为红色(字体)
元素选择器
作用:根据标签名来选中指定元素
语法:标签名{}
例子:p{} h1{} div{}
*/
/* p{
color: red;
}
*/
h1{
color: green;
}
/*
将“心有灵犀一点通”设置成红色
id选择器
根据元素的id属性值选中一个元素
语法:#id属性值()
例子:#box() #red()
id不能重复
*/
#red{
color: red;
}
/*
将“衣带渐宽终不悔,为伊消得人憔悴”设置为蓝色
类选择器
作用:根据元素的class属性选中一组元素
语法;.class属性值
*/
.blue{
color: blue;
}
.abc{
font-size: 20px;
}
/*
通配选择器
作用:选中页面中的所有元素
语法:*
*/
*{
color: purple;
}
</style>
</head>
<body>
<h1 class="green abc">我是标题</h1>
<p>两情若是久长时</p>
<p>又岂在朝朝暮暮</p>
<p id="red">身无彩凤双飞翼</p>
<p id="red">心有灵犀一点通</p>
<!--
class 是一个标签的属性,它和id类似,不同的是class可以重复使用
可以通过class属性来为元素分组
-->
<p class="blue">衣带渐宽终不悔</p>
<p class="blue">为伊消得人憔悴</p>
</body>
</html>
前端——常用选择器
最新推荐文章于 2023-05-14 14:58:55 发布