伪类和伪元素的区别，以及伪元素的妙用（上）

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

小白程序员-博客第二篇

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

到底啥是伪类呢

很多网站给了一句话，用于向某些选择器添加特殊的效果，太含蓄简洁啦，我压根就没懂
所以整理了一下，一般伪类，用的比较多的是结构化伪类和状态伪类，看到这两个千万别怕，其实不难，话不多说，一个个开刀，我们先看状态伪类，上图

是不是有种熟悉的感觉，这不就是我们平常的用的在元素上加个: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端是完全可以，移动端的还待考验噢

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

伪类和伪元素的区别，以及伪元素的妙用（上）相关推荐

CSS伪类选择器nth-child 选择3的倍数个元素写法
CSS伪类选择器nth-child 选择3的倍数个元素写法 web开发中,经常有对列表的3倍数列表项单独设置样式的需求. ul li:nth-child(3n+3) { colo ...
Css伪类选择器之常见形式、动态伪类篇
伪类选择器伪选择器包括伪类和伪对象选择器,伪选择器以冒号(:)作为前缀标识符.冒号前可以添加选择器,限定伪类应用的范围,冒号后为伪类和伪对象名,冒号前后没有空格,否则将错认为类选择器: 单纯式,E: ...
html怎么使用伪类清除浮动,JS中使用 after 伪类清除浮动实例
以前清除浮动的时候总是在想要清除浮动的元素后面添加或者写在br标签里面来解决,但这样会增加无语义的标签,下面是用after伪类实现,兼容多种浏览器 .clearfix:after{ content: ...
html中伪类的兼容性,css,ie8兼容性_CSS 伪类在IE8中样式无法生效，css,ie8兼容性,伪类 - phpStudy...
CSS 伪类在IE8中样式无法生效写了一个纯CSS的竖版流程样式,效果如下起始 1 2 结束使用:before生成左侧圆,首尾两头的li用:after生成竖条,其余都用border-left填补 ...
html中p标签的伪类选择器,表单标签和css伪类选择器
一.表单标签和input标签 1.表单标签:form 这个标签作为一个容器,来收集和提交这个标签中其他相关标签的数据,一般不单独使用 active属性:设置提交路径(接口) method属性:设置请求 ...
块级元素内联元素的区别，空元素
1.块级元素常见的块级元素: display:block/table 的元素<div></div><ul></ul><li></li ...
css伪类与伪元素区别
伪类伪类就是一种虚构的状态或者说是一个具有特殊属性的元素可以使用CSS进行样式修饰. 伪类选择元素基于的是当前元素处于的状态,或者说元素当前所具有的特性,而不是元素的id.class.属性等静态的标 ...
css中伪类与伪元素的区别
一:伪类: 1:定义:css伪类用于向某些选择器添加特殊效果. 伪类其实与普通的css类相类似,可以为已有的元素添加样式,但是他只有处于dom无法描述的状态下才能为文档树中的元素添加样式,所以将其称为 ...
伪类和伪元素的区别及使用场景
1. 伪类和伪元素的区别 1.1 作用不同伪类是一种状态,可以看看做是选择器.比如鼠标经过伪类 :hover , 比如结构伪类 li:nth-child, 一个冒号. 伪元素是元素, 简单来 ...
伪类选择器与伪元素选择器的区别
Hello,小可爱们,今天我们一起来区分一下伪类选择器跟伪元素选择器吧! 伪类选择器与伪元素选择器在名字上很相似,所以对于初学者来说,很容易混淆它们,区别不开,其实两者在作用上还是有本质的区别的,只要 ...

伪类和伪元素的区别，以及伪元素的妙用（上）

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

伪类和伪元素的区别，以及伪元素的妙用（上）相关推荐

最新文章

热门文章