伪类和伪元素的区别,以及伪元素的妙用(上)

HTML5和CSS3汇总 专栏收录该内容
6 篇文章 1 订阅

伪类到底是什么呢,与伪元素又有啥关联呢

小白程序员-博客第二篇

说到伪类伪元素呢,这里可能就跟读者们唠叨一下啦,伪类和伪元素到底有什么渊源呢,上面文章说到伪元素可以清除浮动,其实呀,伪元素的功能不止于此,它还有好多其他的骚操作呢,我们先从区别开始讲起哈

到底啥是伪类呢

很多网站给了一句话,用于向某些选择器添加特殊的效果,太含蓄简洁啦,我压根就没懂
所以整理了一下,一般伪类,用的比较多的是结构化伪类和状态伪类,看到这两个千万别怕,其实不难,话不多说,一个个开刀,我们先看状态伪类,上图
在这里插入图片描述
是不是有种熟悉的感觉,这不就是我们平常的用的在元素上加个:hover ,简称:摸一下

//html代码
<div class="test_hover"></div>

//css代码
.test_hover {
    border: 1px solid black;
    width: 200px;
    height: 200px;
}
.test_hover:hover {
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.3);//增加边框阴影
}

其他的:active用于点击那个元素 (这个属性在移动端需要一些处理,先了解着,以后再说)
:visited用于链接的,与那个:link 形成对应的,比如说链接被点之前,也就是被访问之前,那就是link来决定它的属性,如果被点了呢,那就是visited啦,字面意思理解就好啦
:focus这个经常用于表单
不过呢,这几个伪类的叠加的使用上要有着”love hate“的原则呀
具体是怎样呢,瞧我跟你解释下,如果这几个伪类的顺序没搭配好呀,会根据css最后的一个属性进行覆盖,话不多说,上代码如下

a:link {
    color: blue;
}
a:hover {
    color: black;
}
a:active {
    color: gold;
}
a:visited {
    color: red;
}

当你鼠标移上去之后,确实会变色,但是点完之后就只会变成红色,因为visited在css最后面,css肯定选取最后一个嘛,那再去点a标签,它压根就不想理你,不想变色。所以有一个顺序,love hate是什么意思 l就是link ,o是过渡,为了好记,v就是visited, e就是过渡, h就是hover啦 ,a就是active,其他的是过渡。因此,正确顺序就是如下

a:link {
    color: blue;
}
a:visited {
    color: red;
}
a:hover {
    color: black;
}
a:active {
    color: gold;
}

所以当你使用这么多个伪类的时候,你要小心啦,当心他们的顺序哟

好了,这就是状态伪类啦,其实本质就是改变它的状态,说的有点多,希望不要嫌弃。

下面我们来看看什么是结构化伪类
在这里插入图片描述
好,看到上面图,我就问你怕不怕,是不是突然觉得好多,怕记不过来呢,其实呀,我们只要理清它们各自存在的意思,过一遍,然后时不时翻一翻,就记住啦。既然如此,让我们来思考,它存在的意义在哪里呢,其实呀,它的存在,还是非常有用,它是为了帮助我们选择很多个子标签的中第几个子标签,话不多说,代码如下

 <div class="li">
        <div class="lili"></div>
        <div class="lili"></div>
        <div class="lili"></div>
        <div class="lili"></div>
        <div class="lili"></div>
 </div>
 <div class="ayong"></div>

//css样式
    body {
      padding: 0;
      margin: 0;
    }
    .li {
      overflow: auto;//清除浮动的方法之一,上篇文章详解
      width: 100%;
    }
    .li .lili {
      width: 200px;
      height: 200px;
      float: left;
      border: 1px solid black;
    }
   
    .ayong {
      height: 500px;
      width: 500px;
      border: 1px solid black;
    }

在这里插入图片描述
好了,现在li标签有那么多个lili标签,如何选择他们呢,又很难做到雨露均沾,所以呀,结构化伪类腾空出世,极大方便我们的操作,你可能说加 id 或者其他 class 去选择它不就好啦,可以是可以,但是呢,又引入了其他标签,所以呀,让我们看看有哪些呢(如果这里有小伙伴觉得我没有清除浮动的可以去看我上一篇文章噢

(一):first-child
首先这个呢,first嘛,顾名思义,就是第一个,child是孩子的意思,那连起来,不就是第一个孩子的意思嘛,好,上代码

.lili:first-child {
  background-color: black;
}

在这里插入图片描述
这样一看,一目了然,再来第二个

(二) : last-child
last的意思是最后的意思,最后的孩子,我们来上代码

.lili:last-child {
  background-color: black;
}

如下图所示
在这里插入图片描述

接着,我们看看第三种

(三):nth-child 对指定序号的子元素使用样式
:nth-last-child 对倒数指定序号的子元素使用样式

:nth-child(1)表示第一个子元素 那效果就等同于上面的:first-child
:nth-last-child(1)表示最后一个子元素,那效果就等同于上面的:last-first

里面的数字呢,就决定了第几个元素,就好理解啦

(四):nth-of-type 和:nth-last-of-type

既然有了上面的对子元素指定,为什么要多这个type这个鬼东西呢,难道是有什么特殊的情况嘛

哈哈,正如你所看到的,确有其事,不过这里面有涉及了一个知识点,就是nth-child(数字),里面的数字可以是一个变量,even表示偶数,odd表示奇数,当然可以是n+1,n+2,2n+1等等啥的,这个后面再提一下,因为它涉及到了一个循环的方法。好了,知识补充完毕了,该开始正题了。

上代码

<div class="test">
        <h4>我是第一个</h4>
        <p>我是第二个</p>
        <h4>我是第三个</h4>
        <p>我是第四个</p>
        <h4>我是第五个</h4>
        <p>我是第六个</p>
        <h4>我是第七个</h4>
        <p>我是第八个</p>
 </div>
 
//css样式
.test {
  width: 200px;
  margin: 0 auto;
}

在这里插入图片描述
上css代码

h4:nth-child(odd) {
  background-color: aqua;
}

效果如下图
在这里插入图片描述
如图所示,确实都是奇数的,但是我只想选择h4这个标签下的奇数,而不是整体的奇数,懂我意思嘛,就是说,上图说的"我是第三个",在div这个整体的标签下看来,是第三个,但是在h4这个标签下,我才第二个,因此,我们试试nth-of-type
代码如下

h4:nth-of-type(odd) {
  background-color: aqua;
}

效果如下
在这里插入图片描述
所以讲到这里,大家或许都明白了,nth-of-type存在的意义,它就是为了在它那种类型里面指定自己想要,nth-child就没想那么多,它可能觉得小孩子才做选择,它都要哈哈

好了,讲到这里,想必大家对nth-child 、nth-of-type 已经有一定了了解了,last就是倒过来。所以下面介绍一下,它们里面的数字,涉及到的循环方法,又是什么呢?

nth-child(n+1),nth-child(2n+1),等等,它对应着不同的标签,合理的运用,你也可以的,赶紧试一下吧。

(五):only-child

这个呢,是表示子元素只有一个的时候才会执行,如果它的子元素超过一个,那肯定就不执行啦。

上代码如下

 <div class="test_only">
        <ul>
            <li>11</li>
        </ul>
        <ul>
            <li>22</li>
            <li>33</li>
        </ul>
 </div>



 //css代码
        li:only-child {
          background-color: black;
        }

在这里插入图片描述
好了,当你读到这里,想必已经对

nth-child    

nth-of-type  

only-child

有了一定的了解了,我们再来看 看其他的妖魔鬼怪,答应我,打败它,好吗

(六):not
这个又是什么呢,顾名思义,就是not就是不要,比如在li标签中,你不要哪个标签参与,你只需要

:not(h4) h4就会排斥,太可怜了,如下

.test:not(h4) {
  background-color: black;
}

在这里插入图片描述

(七):empty
这个又是啥呢,说实话我本来也不知道,看了资料,原来它更多的是用在表格table上,如果那个空格空着了,它就可以锁定啦,直接过去改它的颜色,美滋滋,先记着,说不定哪天用到了呢哈哈

(八):root
看到这个,我感觉有点高大上的感觉,赶紧喝了一杯水压压惊,然后想了想,它的意思,是根的意思,那就是最底部,最基础的东西,所以,一般呢,root之后,只要后面,没有css元素去重叠它,它基本就那个属性啦,比如说

:root {
    color: aqua;
}

直接加这个代码,你的颜色都是这个了,除非后面有改动,我觉得,这个一般作为默认样式理解,有点像这个*选择器。

(九):target
这个呢,用在超链接上比较多,并且还有条件,要该元素的id被当成超链接来使用

上代码就知道啦。如下

 <p><a href="#news1">跳转内容 1</a></p>
<p><a href="#news2">跳转内容 2</a></p>
<p>单击上面的链接</p>
<p id="news1"><b>内容1</b></p>
<p id="news2"><b>内容2</b></p>

在这里插入图片描述

在css中加上,如下

:target {
    background-color: black;
}

那等你点击的时候呢,就会变色啦
在这里插入图片描述

是点完之后才变色,也就是点完才生效,这个有点像js的一些功能了。

好了,总结完了,上面一些内容,完全可以用js实现,但是css的伪类有些有的功能,我们为何不直接拿来用呢哈哈,但是呢,在pc端是完全可以,移动端的还待考验噢

以上就是常用伪类的总结,下次总结伪元素的其他用法,敬请期待吧,创作不易,且行且珍惜,一起加油,我们可以的

  • 6
    点赞
  • 4
    评论
  • 20
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值