class选择器:

我们上一节讲到的内部样式,外部样式,行内样式就是对特定标签的选择,给它加上样式,算是标签选择

这一节我们要讲的选择器,就是选择一类标签给他们加上特定的样式,比如我们有6的div标签,我们只想给其中3个加上特定的样式,我们要是像上一节只能用行内样式一个一个加,因为都是div标签,我们要是选择给div标签加的话,那就是都加上了样式,所以这就涉及到我们更细节化的选择器,看下面的需求和代码演示:

首先我们要讲的是class选择器/类选择器:

代码如下:

 结果:

 上面代码所示就是class标签的运用,要想选择其中三个统一添加样式,用class标签给他们增加标记,上面的三个标签增加了class=“fuk”的标记,在给他们添加样式时,选择添加了fuk标记的标签,写法是“.fuk{属性:属性值;}”,记得要写在style标签内,这里的fuk叫做class名

这个时候我又想给添加了样式的三个标签其中一个添加字体样式,该怎么做,看下面:

代码演示:

 结果:

 我又单独给它加了一个zr的标记,然后再用".zr"选择这个标签,给它添加样式

这个时候,如果说两个标签选择器中给都给加了一个属性,优先级又如何呢,看下面代码所示:

代码演示:

 我们看,这个第二个div标签,因为既有fuk,又有zr,所以被选择了两次,但是两次都添加了背景颜色,而且不一样,这个时候到底结果是用谁的背景样式呢,见结果所示:

 通过结果我们发现了,运用的是zr最后一个设置的样式,这个时候就有人说了:那肯定是就近原则喽,看下面的class=“fuk zr”先等于的是“fuk”后等于的是“zr”所以就近原则最后用的是zr的,那如果我们将fuk和zr调换一下位置呢,又是什么样的情况,看下图:

代码演示:

 结果:

 结果发现为什么还是原来的结果,不应该是fuk的样式吗,这你就理解错了,这里的最后按照谁的样式根据的是style标签里从上到下来执行的,fuk第一个执行,zr最后一个执行,所以按照的就是zr的样式

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐