<!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">
<title>Document</title>
<style>
/*
将所有的段落设置为红色(字体)
元素选择器
作用:根据标签名来选中指定的元素
语法:标签名{}
例子:p{} h1{} div{}
*/
/* p{
color: red;
}
h1{
color: green;
} */
/*
将儿童相见不相识设置红色
id选择器
作用:根据元素的id属性值选中一个元素
语法:#id属性值{}
例子:#box{} #red{}
*/
/* #red{
color: red;
} */
/*
将 秋水... 和 落霞... 设置为蓝色
类选择器
作用:根据元素的class属性值选中一组元素
语法:.class属性值
*/
/* .blue{
color: blue;
}
.abc{
font-size: 20px;
}
*/
/*
通配选择器
作用:选中页面中的所有元素
语法: *
*/
*{
color: red;
}
</style>
</head>
<body>
<h1 class="blue abc">我是标题</h1>
<p>少小离家老大回</p>
<p>乡音无改鬓毛衰</p>
<p id="red">儿童相见不相识</p>
<p>笑问客从何处来</p>
<!--
class 是一个标签的属性,它和id类似,不同的是class可以重复使用
可以通过class属性来为元素分组
可以同时为一个元素指定多个class属性
-->
<p class="blue">秋水共长天一色</p>
<p class="blue">落霞与孤鹜齐飞</p>
</body>
</html>
元素选择器 id选择器 类选择器
最新推荐文章于 2024-02-04 09:46:40 发布