1.元素选择器
作用:通过元素选择器,可以选择页面中的指定元素。
语法:标签名{}
Titlep{
color:red;
}
锄禾日当午
2.id选择器
作用:通过元素的id属性值,选中唯一的一个元素。
语法:#id属性值{}
Title#p1{
color:red;
}
锄禾日当午
锄禾日当午
3.类选择器
作用:通过元素的class属性值选中一组元素
语法: .class属性值{}
Title.p2{
color:greenyellow;
}
锄禾日当午
锄禾日当午
锄禾日当午
可以为元素设置class属性。
calss属性和id属性类似。只是class属性可以重复。
拥有相同class属性值的元素,我们说它们是一组元素。
可以同时为一个元素设置多个class属性值,多个值之间使用空格隔开。
happy new year
4.选择器分组(并集选择器)
作用:通过选择器分组可以同时选中多个选择器对应的元素。
语法: 选择器1,选择器2,选择器N{}
Title#p1,.p2,h1{
background-color: yellow;
}
悯农
锄禾日当午
锄禾日当午
锄禾日当午
5.通配选择器
作用:可以用来选中页面中的所有元素
语法:*{}
*{
color:red;
}
6.复合选择器(交集选择器)
作用: 可以选中同时满足多个选择器的元素
语法: 选择器1选择器2选择器N{}
Title/*
* 为拥有class p3 的span元素设置背景颜色为黄色
*/
span.p3{
background-color: yellow;
}
悯农
锄禾日当午
锄禾日当午
注意:对于id选择器来说,不建议使用复合选择器。