今晚上我们来简单的聊一聊CSS的伪元素,多说无益,开聊

GG: 话说盘古开天辟地之时。

QQ:嗨,咱今天还能讲的完吗?您给来点实际的啊。

GG:要听实际的是吧,得嘞,那今天咱就来聊一聊CSS里的伪元素,这个可以吧。

QQ:可以可以,您来。

GG:话说这个CSS的伪元素呢,想必您各位也应该有所耳闻,今日我就班门弄一会斧子

QQ:抓紧说啊您,别耽误我下班

GG:(翻白眼)CSS的伪元素目前一共有四个,分别是::first-line,::first-letter,::before,::after

QQ:   哦?还有呢

GG: 别急啊您,咱一个一个来,先看这个first-line和first-letter,第一个表示元素的第一行,第二个呢则表示元素的第一个字母,这俩呢说像也像说不像也不像

QQ: 啥叫像也不像呢

GG: 这个象呢,就是都是老大,都是第一,不像呢,主要是规则不像,CSS标准规定first-line必须出现再最内层的块级元素之中,是最内层的块级元素哟!

QQ: 您说就行,我带着助听器能听见,不用喊

GG:光说能行吗?刚刚验证了您听力不错,现在得让您上眼看看,来啊,把我那86的拉菲,不是,把我那86年的代码呈上来

QQ: 喝,86年,够纯的啊

GG:来,考考您的视力,这个First paragraph是什么颜色的

QQ:这您还真难不倒我,绿色

GG:我看你头上有点绿啊,这个First paragraph明明是蓝色

QQ:哦?您来讲讲为什么

GG:合着您这是脑袋不好啊,刚跟您说过,first-line必须出现再最内层的块级元素之中

QQ: 那最内层不是块级元素呢

GG: 最内层不是块级元素,那就去找倒数第二层呗。来,再上一份86年的代码

QQ: 您家这86年的老物件挺多啊

GG:这个我就不让你猜了,直接告诉你这个First paragraph是绿色,您知道这是为什么吗

QQ:因为结构的最内层是span,不是块级元素,所以伪元素加载了div上,而又通过CSS给span加了样式,所以加在伪元素上的样式就被span上的样式覆盖掉了

GG:不错不错,是个好苗子,下面我们来看一看first-letter,first-letter就比较厉害了,我管你最里面的元素是块级元素还是行内元素,都得听我的

QQ: 这个怎么说呢?您继续来个86年的代码?

GG:都知道抢我台词了,来,呈上来

GG:来,你说这个First letter的首字母F是啥颜色

QQ: 这个难不倒我,蓝色,你这刚说了first-letter不管最里面的元素是块级元素还是行内元素,都得看first-letter的

GG: 不错不错,既然first-line和first-letter说完了,我们来看看下面那俩after和before,这俩比上面那俩还要厉害

QQ: 此话怎讲

GG: first-letter和first-letter相当于把已有内容套上一个元素,而after和before则是无中生有,凭空造出一个元素

QQ: 这木厉害?随随便便就能造吗?

GG: 那当然不能了,要想造出元素必须要指定他的content属性才行

QQ: 那他俩有什么好处呢?

GG: 好处大了,比如我们写页面时的装饰性元素,都可以使用这种伪元素的方式添加,从而减少DOM中无意义的空元素并且保持HTML良好的语义性。

——突然QQ转身就走

GG:你这是干啥去啊

QQ: 干啥去?我约了托尼老师烫头

------------------------------------------------------------------------------------------------------------------

嘿嘿,写点轻松的,各位大神轻喷,只是为了让知识不那么枯燥,有喜欢的关注我啊,需要霸王的也可以关注我啊,我不卖霸王,我就是看看人即将要头皮锃亮亮O(∩_∩)O

笑谈CSS的伪元素的更多相关文章

  1. HTML和CSS设置动态导航以及CSS中伪元素的简单说明

    HTML页面代码: <!DOCTYPE html> <html> <head> <title>Test</title> <meta c ...

  2. CSS的伪元素(二)

    随便聊聊CSS的伪元素,虽然它们在项目开发中用的并不多,但确实很有用,在项目中不用它,是因为大家不能了解它们,下面是一个工作场景,如有四个按钮,分别是建立,编辑,删除和修改,而我们要求这在前台显示的汉 ...

  3. css的伪元素

    这里想将的是两个伪元素,一个是:first-line——用来向文本的首行添加特殊样式,并且不论该行出现多少单词:只能与块状元素关联. 如下属性可以应用于:first-line伪元素 font属性 co ...

  4. [CSS]利用伪元素实现一些特殊图形

    给定的html代码是: <div class='square'></div> 平常实现我们常是通过添加小的icon来实现,不仅需要添加图片资源,还需要改动html结构. CSS ...

  5. [CSS]利用伪元素实现一些特殊图形 from baidu校招

    最近在博客园看到某人发的baidu校招题目,说是要用一行html代码实现下面的这个图形: 给定的html代码是: <div class='square'></div> ---- ...

  6. 浅谈css的伪元素::after和::before

    css中的::after和::before已经被大量地使用在我们日常开发中了,使用他们可以使我们的文档结构更加简洁.但是很多人对::after和::before仍不是特别了解,究竟他们是做什么的?如何 ...

  7. CSS之伪元素

    1. :first-line 向元素的首行文本添加样式,不必关心首行是元素节点还是文本节点 <style> body,htm,div,p{ margin:0; padding:0; } d ...

  8. css中伪元素before或after中content的特殊用法attr

    html代码如下: <div class="haorooms"> <span data-haorooms="haorooms鼠标效果tips-纯css& ...

  9. CSS 优先级&amp;伪元素&amp;伪类

    优先级 单冒号(:)用于CSS3伪类,双冒号(::)用于CSS3伪元素 伪元素 属性 描述 CSS :first-letter 向文本的第一个字母添加特殊样式 1 :first-line 向文本的首行 ...

  10. CSS的伪元素和伪类

    css3为了区分伪类和伪元素,伪元素采用双冒号写法. 常见伪类—— :hover, :active, :visited, :focus. 常见伪元素——::first-letter,::first-l ...

随机推荐

  1. chrome调试 JavaScript 脚本

    随着 JavaScript 应用的复杂性逐渐提高,开发者需要有力的调试工具来帮助他们快速发现问题的原因,并且能高效地修复它.Chrome DevTools 提供了一系列实用的工具使得调试 JavaSc ...

  2. Go

    一.简介 https://zh.wikipedia.org/wiki/Go 二.安装 1)低版本 http://blog.sina.com.cn/s/blog_59cc90640102xm8r.htm ...

  3. Windows server上rsync的安装和使用

    获取和安装 首先从rsync官网下载软件的安装版本,注意这里要下的是客户端版本,而非服务端版本. 下载完成之后,双击"cwRsync_4.0.5_Installer.exe"图标, ...

  4. angularJs自定义指令时的绑定

    <!DOCTYPE html> <html ng-app="app"> <head> <meta charset="utf-8& ...

  5. Latex 论文elsevier,手把手如何用Latex写论文

    这几天在开始写论文,准备发的是elsevier,这个网站的instruction有问题,下载的东西基本上好多的错误,所以我就写博客记录. 首先看下:https://www.elsevier.com/a ...

  6. 微信小程序项目踩过的几个坑

    一.前言 近期,开始了一段辛酸的还未开始就已经结束的"创业"(参见我的第二次创业,以梦为马,莫负韶华).大体上是开发了一款微信小程序,关于创业这件事情就不细说了,本文主要介绍一下开 ...

  7. 【LaTeX排版】LaTeX使用--入门基础&lt;一&gt;

    经过两个多星期,毕业论文终于写完了.由于自己对Word软件并不是很熟悉,再加上在数模时见识过LaTex的强大之处,于是就决定用LaTex进行论文的排版.使用LaTex可以避免像Word那样换台机器而出 ...

  8. WebApi的好处和MVC的区别

    1.WebApiwebapi有自己的路由. webservice和wcf的协议都是soap协议,数据的序列化和反序列化都是soap的格式.而webapi是Json的数据传递 webapi的优点有哪些? ...

  9. centos6下通用二进制安装mysql5.5.33

    mysql5.5通用二进制格式安装方法 1.解压到 /usr/local 目录 # tar xf mysql-5.5.33-linux2.6-x86_64.tar.gz -C /usr/local 2 ...

  10. CSS3 transition 属性过渡效果 详解

    CSS3 transition 允许 CSS 元素的属性值在一定的时间区间内平滑地过渡.我们可以在不使用 Flash 动画或 JavaScript 的情况下,在元素从一种样式变换为另一种样式时为元素添 ...