第14天:在文字前、后插入一个图标

第7天:CSS中的选择器详解 这篇文章中我们介绍了各种选择器,但是并没有对每个选择器详细地讲解,今天通过一个真实的例子来讲解伪选择器,伪选择器分为伪类选择器(Pseudo-classes)和伪元素选择器(Pseudo-elements)。这两个概念老混淆,你有没有好的记忆方式,欢迎留言。我认为伪选择器在于「伪」这个字,它很能「伪装」,比如它偶尔伪装成一个DOM中不存在的元素。

1.伪类选择器(Pseudo-classes)它的作用是选中某个元素中符合某些条件的元素。比如鼠标悬停到某个元素后的状态,某个元素的第一个孩子,使用1个冒号 : 。它的效果好像是为元素添加了一个新的选择器。「作用于现有元素,相当于给现有元素添加某些属性」。对于这类选择器在前面的课程中我们有提到过 群里讨论的一个选择器问题(一定要看),它主要涉及到选择某些孩子节点。常用的伪类选择器有:

:first-child:not:nth-child():only-child():root():disabled

其实比较常用的 a 标签在不同状态下的展示效果。

a {    font-size: 18px;    color: black;}a:hover {    color: blue;}a:visited {    color: gray;}
<body>    <a href="https://lefex.github.io/">前端小课</a></body>

2.伪元素选择器(Pseudo-elements)它的作用就是给现有元素添加某些新的内容,就好比给某个元素添加了一个新的标签,使用2个冒号 :: ,有些也可以使用1个:,但建议统一使用2个冒号 :: 。

比如在 第9天:自我介绍 这节课程中,首字“我”不同于其它字,它的字体大小是 30px。实现这种效果可以通过添加一个 span 标签,也可以使用伪元素选择器 ::first-letter 实现。

对于「图+文字」这种效果可以利用 ::before 这个伪元素选择器。下面的 CSS 样式中的 content 属性必须有,否则将不会展示。

.left {    color: black;    font-size: 15px;}.left::before {    /* content: 'before'; */    content: '';    display: inline-block;    vertical-align: middle;    background-image: url('./images/hert.png');    background-repeat: no-repeat;    background-position: center;    background-size: cover;    margin-right: 4px;    width: 30px;    height: 30px;}
<body>    <p class="left">前端小课</p></body>

如果把上面的 ::before 换成 ::after,显示效果如下:

从上面可以看到,通过 ::before 和 ::after 可以给已知元素的前面或者后面拼接新的内容,好像添加了新的元素,我觉得这应该就是伪元素中“伪”的真正含义吧,它并不是一个真正的元素,但可以充当元素的角色。

当然也可以通过 ::before 和 ::after 给已有的元素添加新的文字内容,比如:

.right {    color: black;    font-size: 15px;}.right::after {    content: '→';    display: inline-block;    color: red;    margin-left: 5px;}
<body>    <p class="right">前端小课</p></body>

预览效果如下:

除了这两个伪元素外,还有其它的伪元素,比如:

::first-letter 表示对首字母进行操作
::first-line 对首行内容进行操作

总结

本节课程通过对 ::before 和 ::after 的使用,更进一步了解了伪元素选择器和伪类选择器。在实际使用场景中,这两类选择器使用的频次比较高,希望能够重点掌握。在实际使用场景中,如果你实在区分不开伪元素选择器和伪类选择器,可以先把伪元素选择器记住,常用的就 4 个,::before、::after、::first-letter、::first-line。剩下的就是伪类选择器,你有没有发现伪类选择器和类选择器差不多,你也可以通过一个类选择器实现伪类选择器的功能,只是不太优雅。大家加油。

今天的打卡指令(任意一个):

1.在日常中你都用过哪些选择器;

2.补充文中未提到的伪类选择器;

3.补充文中未提到的伪元素选择器;


推荐阅读:

第7天:CSS中的选择器详解

https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements#What_is_a_pseudo-class


点在看,变好看

  • 0
    点赞
  • 2
    收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:数字20 设计师:CSDN官方博客 返回首页
评论

打赏作者

lefex

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值