CSS之伪类元素

CastlePeaK 发布于2019-08-29 11:18 / 1208人阅读

摘要：再来一枚栗子，八卦图，哈哈这里换成发现效果是一样的其中学到的小技巧不仅仅包括伪类元素的使用，还有如何画一个圆，用来控制就好了，一般设置成或都能达到画圆的效果。效果图如下好啦，今天学到得不少呢，继续怀挺

近期在做各大公司Web前端笔试题的时候，收获颇丰，让我感受强大的CSS的魅力，真的好神奇！

下面是一个demo：

将这段代码保存成.html文件，放入浏览器中运行，你会发现一个非常有个性的图片：

这里是用css中的伪类元素（:before和:after）来实现的，:before和:after的作用就是在指定的元素内容（而不是元素本身）之前或之后插入一个包含content属性指定内容的行内元素。

再来一枚栗子，八卦图，哈哈：

其中学到的小技巧不仅仅包括伪类元素的使用，还有如何“画”一个圆，用border-radius来控制就好了，一般设置成50%或100%都能达到画圆的效果。效果图如下：

好啦，今天学到得不少呢，继续怀挺！

混合云私有云 css元素伪类 UI伪类伪类 html

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/111562.html

CSS系列之目录

摘要：图片自适应两列布局一列定宽三列布局各单位距离比较与图形绘制总结兼容性系列之或中系列之关于字体的事系列之伪类与伪元素系列之常用布局系列之布局神器与系列之与系列之水平垂直居中系列之与 word-wrap & word-break & white-space图片自适应两列布局(一列定宽）三列布局css 各单位距离比较BFC与IFCCSS图形绘制总结pointer-eventsCSS兼容性cs...

cncoder 2019-08-30 15:55 评论0 收藏0
CSS3伪类和伪元素

作为一个CSS3初学不久者来说，很容易混淆单冒号（:）和双冒号（::）的用法，以为两者可以互换着来使用。我自己之前也混淆过他们，因为两者看起来太相像了，就像孪生兄弟。但实际上，他们的区别还是挺大的，最多算得上近房亲戚。下面我们来开始讲讲单冒号（:）伪类和双冒号（::）伪元素有什么相同和不同点（另外在CSS2中单冒号: 也叫做伪对象，具体可看看http://www.mb5u.com/tool/cs...

mozillazg 2019-04-23 13:35 评论0 收藏0
学习《CSS选择器Level-4》不完全版

摘要：查看示例程序通配选择器通用选择器是一种特殊类型选择器，表示任何元素类型的元素。例如元素组在未被初始选择的情况下就为不确定值状态。组合选择器后代选择器匹配的后代的元素并设置其颜色为红色。 1 概述 1.1 前言选择器是CSS的核心组件。本文依据W3C的Selectors Level 4规范，概括总结了Level1-Level4中绝大多数的选择器，并做了简单的语法说明及示例演示。希望对程...

wind5o 2019-08-29 18:36 评论0 收藏0
我终于理解了伪类和伪元素

摘要：伪类和伪元素，对于绝大多数同学来说，都是耳熟能详的名字，但确实又有很多人搞不清楚它们之间的区别，以致于混淆概念。除了上面这个本质区别以外，在中，伪类用单冒号表示而伪元素用双冒号表示。 showImg(https://segmentfault.com/img/bV4WC1?w=510&h=310); 伪类和伪元素，对于绝大多数同学来说，都是耳熟能详的名字，但确实又有很多人搞不清楚它们之间...

张迁 2019-08-30 14:05 评论0 收藏0
谈谈css伪类与伪元素

摘要：状态伪类是基于元素当前状态进行选择的。在与用户的交互过程中元素的状态是动态变化的，因此该元素会根据其状态呈现不同的样式。单冒号用于伪类，双冒号用于伪元素。可以通过对父元素添加伪类撑开父元素高度，因为就是其最后一个子元素。 css选择器常见包括id（#id）、标签（tag）、class（.class）、属性[attr=attrval]等，还包括伪元素和伪类选择器。正确的利用伪元素和伪类能...

Berwin 2019-08-01 18:04 评论0 收藏0