目录
重点:选择器的优先级:类选择器>元素选择器=id选择器>通配选择
今天学了CSS的选择器,常用的选择器有四种,分别是:元素选择器、id选择器、类选择器、通配选择器
这是我第一次写这样的文章,写的不好还请见谅。
元素选择器:
作用:根据标签来选中指定元素
语法:标签名{}
例子:p{} h1{} div{}等等
举例:
我们将p标签中的内容设置成红色(字体) , 将字体大小设置成40px。
运行结果:
这里面可以看到只有p标签里的内容变成了红色,而h1里面的没有发生改变
id选择器:
作用:根据元素的id属性值选中一个元素
语法:#id属性值{}
例如:#box{} #red
举例:
我们将id为red的属性值中的内容设置成红色(字体),将字体大小设置成40px
运行结果:
这里面只有id为red的标签发生了改变。当我们把id为blue也设置之后,结果如下图:
类选择器:
作用:根据元素的class属性选择一组元素
语法:.class属性值
例如:.abc{} .yellow{}
class 是一个标签的属性,它跟id差不多,不同的是class可以重复使用
可以通过class属性来为元素分组
举例:
我们将"落霞与孤鹜齐飞,秋水共长天一色"设置成黄色(字体),将字体大小设置成40px
运行结果:
我们可以给class赋两个值,但是两个值之间要用空格分开。如下图:
运行结果:
我们会发现“落霞与孤鹜齐飞”里面我们设置了两个颜色,但是浏览器会默认为后者的颜色,即是红色。
通配选择器
作用:选择页面中所有的元素
语法:*{}
举例:
我们将页面中所有的内容都设置成设置成红色(字体),
同时将字体大小设置成40px。
运行结果如下: