常用选择器:
题:
/* 需求一:标题变红色 */
/* 1、元素选择器(标签选择器)
作用:选中对应标签的内容
语法:标签名{css样式····}
例子:h1{},h3{},p{}
*/
h1{
color: red;
}
/* 需求二:将第一句诗变绿色 */
/* 2、id选择器
作用:选中对应id属性值的内容
语法:#id属性值{}
例子:#p1{},#p2{}····
注意:id属性值不能重复使用
*/
#p1{
color: green;
}
/* 需求三:将第二、三句诗变橙色 */
/* 3、class选择器
class选择器的用法跟id选择器是一样,只不过class属性值可以重复使用
作用:选中对应class属性值的内容
语法:.class属性值{}
注意:class属性值可以起多个,中间用空格隔开即开
例子:.s1{},.ss{},.pp{}
*/
.s1{
color: orange;
}
/* 需求四:给所有的标签字体变为24px */
/* 4、通配选择器
作用:选中所有的标签,进行设置
语法:*{}
*/
*{
font-size: 24px;
}
复合选择器:
题:
/* 复合选择器两种 交集选择器,并集选择器 */
/* 需求一:将class为red的诗句变为红色,同时将class为red的div字体变为24px */
/* 1、交集选择器
作用:选中同时符合多个条件的内容
语法:选择器1选择器2选择器3····{}
注意:如果选择器当中有元素选择器,元素选择器必须要放在最前面
例子:p#p1.pp{},div.ss{}
*/
.red {
color: red;
}
div.red {
font-size: 34px;
}
/* 需求二:将h1,h3字体颜色变为橙色*/
/* 2、并集选择器(群组选择器)
作用:同时选中对应的内容
语法:选择器1,选择器2,选择器3····{}
例子:.red,#red1,div,p{}
*/
h1,h3{
color: orange;
}