元素选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>常用选择器</title>
<style>
/*
将所有的段落设置为红色(字体)
元素选择器
作用:根据标签名来选中指定的元素
语法:标签名{}
例子:p{} h1{} div{}
*/
p{
color:pink;
}
h1{
color:rebeccapurple;
}
</style>
</head>
<body>
<h1>0000000000</h1>
<p>11111111111</p>
<p>22222222222</p>
<p>33333333333</p>
<p>44444444444</p>
<p>55555555555</p>
</body>
</html>
id选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>常用选择器</title>
<style>
/*
将22222222222设置红色
id选择器
作用:根据元素的id属性值选中一个元素
语法:#id属性值{}
例子:#box{} #red{}
*/
#red{
color:red;
}
</style>
</head>
<body>
<h1>0000000000</h1>
<p>11111111111</p>
<p id="red">22222222222</p>
<p>33333333333</p>
<p>44444444444</p>
<p>55555555555</p>
</body>
</html>
类选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>常用选择器</title>
<style>
/*
将 2222... 和 3333...设置为蓝色
类选择器
作用:根据元素的class属性值选中一组元素
语法:.class属性值
*/
/*
class 是一个标签的属性,它和id类似,不同的是class可以重复使用
可以通过class属性来为元素分组
可以同时为一个元素指定多个class属性
*/
.blue{
color:blue;
}
</style>
</head>
<body>
<h1>0000000000</h1>
<p>11111111111</p>
<p class="blue">22222222222</p>
<p class="blue">33333333333</p>
<p>44444444444</p>
<p>55555555555</p>
</body>
</html>
通配选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>常用选择器</title>
<style>
/*
通配选择器
作用:选中页面中的所有元素
语法: *
*/
*{
color:red;
}
</style>
</head>
<body>
<h1>0000000000</h1>
<p>11111111111</p>
<p class="blue">22222222222</p>
<p class="blue">33333333333</p>
<p>44444444444</p>
<p>55555555555</p>
</body>
</html>