<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*
为页面中的所有的p元素，设置一个字体颜色为红色
元素选择器
作用：通过元素选择器可以选择页面中的所有指定元素
语法：标签名 {}
/
/ p {
color: red;
}
h1 {
color: yellow;
} */
/*
id选择器
- 通过元素的id属性值选中唯一的一个元素
- 语法：
#id属性值 {}
*/
#p1 {
font-size: 50px;
}
/*
类选择器
- 通过元素的class属性值选中一组元素
- 语法：
.class属性值 {}
*/
.p2 {
font-size: 30px;
}
.hello {
color: red;
}
/*
为id为p3的元素，class为p4的元素，还有h2，同时设置一个背景颜色为黄色
选择器分组(并集选择器)
- 通过选择器分组可以同时选中多个选择器对应的元素
- 语法：选择器1,选择器2,选择器n{}
*/
#p3, .p4, h2 {
color: yellow;
}
/*
通配选择器
- 他可以用来选中页面中的所有元素
语法： * {}
*/
* {
color: blue;
}
/*
为拥有class p3 span元素设置一个背景色为黄色
复合选择器（交集选择器）
- 作用：
- 可以选中同事满足多个选择器的元素
- 语法：
- 选择器1选择器2选择器n {}
*/
span.p5 {
color: green;
}
/*
对于id选择器来说，不建议使用复合选择器
*/
p#p1 {
background-color: red;
}
</style>
</head>
<body>
<h1>李白</h1>
<p id="p1">锄禾日当午</p>
<!--
我们可以为元素设置class属性，class属性和id属性类似，只不过class属性可以重复
用于相同class属性值的元素，我们说他们是一组元素
可以同时为一个元素设置多个class属性值，多个值之间使用空格隔开
-->
<p class="p2 hello">锄禾日当午</p>
<p class="p2">锄禾日当午</p>
<p class="p2">锄禾日当午</p>
<p id="p3">锄禾日当午</p>
<p class="p4">锄禾日当午</p>
<h2>我是h2</h2>
<span class="p5">我是span中的p3</span>
</body>
</html>
网友评论