1.常用选择器：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*
为所有的p元素，设置一个字体大小为30px
元素选择器
- 作用：可以选中页面中的所有的指定的元素
- 语法：标签名 {}
- 例子：p{} h1{} div{} a{}
*/
/*p {
font-size: 30px;
}
h1 {
color: red;
}*/
/*
为id为p1的元素设置字体颜色为蓝色
- id选择器
- 作用：可以根据元素的id属性值，选中唯一的一个元素
- 语法：#id属性值 {}
*/
/*#p1 {
color: cornflowerblue;
}*/
/*
为 汗滴禾下土 和 谁知盘中餐 设置一个黄色的背景
- 类选择器
- 作用：可以根据元素的class属性值选中一组元素
- 语法：.class属性值 {}
* */
/*.p2{
background-color: yellow;
}*/
/*
为class为p3的 和 div 和 span元素设置一个字体颜色为绿色
- 选择器分组（并集选择器）
- 作用：可以选中多个选择器对应的元素
- 语法：选择器1 , 选择器2 , 选择器N {}
*/
/*.p3 , div , span{
color: green;
}*/
/*
* 为class为t1的span设置一个背景颜色为红色
* - 交集选择器
* - 作用：可以选中同时符合多个条件的元素
* - 语法：选择器1选择器2选择器N {}
*/
/*span.t1{
background-color: red;
}*/
/*
* 通配选择器
* - 作用：可以选中页面中的所有的元素
* - 语法：* { }
* - 通配选择器的性能较差，尽量少用
*/
* {
font-size: 50px;
}
</style>
</head>
<body>
<h1>悯农</h1>
<p id="p1">锄禾日当午</p>
<!--
在html中还有一个属性和id类似，class属性
class属性是用来为页面中的元素分组的，它的使用规则和id一样，不同的是在页面中可以出现相同的class属性值
class属性值相同的元素我们认为是一组元素
可以为一个元素同时指定多个class，多个class值之间使用空格隔开
-->
<p class="p2 p4 p5 p6 p7 p8">汗滴禾下土</p>
<p class="p2">谁知盘中餐</p>
<p class="p3">粒粒皆辛苦</p>
<div class="t1">我是div</div>
<span>我是span</span>
<span class="t1">我也是一个span</span>
</body>
</html>
886
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
