跟着李启超老师学前端

目录

第一节

 元素选择器：

 id选择器：

 类选择器：

 通配选择器

 重点：选择器的优先级：类选择器>元素选择器=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。

 运行结果如下：

重点：选择器的优先级：类选择器>元素选择器=id选择器>通配选择