今晚上我们来简单的聊一聊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. windows下nginx安装、配置与使用(转载)

    目前国内各大门户网站已经部署了Nginx,如新浪.网易.腾讯等:国内几个重要的视频分享网站也部署了Nginx,如六房间.酷6等.新近发现Nginx 技术在国内日趋火热,越来越多的网站开始部署Nginx ...

  2. Equls 和==的区别

    对于值类型,如果对象的值相等,则相等运算符 (==) 返回 true,否则返回 false.对于string 以外的引用类型,如果两个对象引用同一个对象,则 == 返回 true.对于 string ...

  3. /var/log目录下的20个Linux日志文件功能详解

    如果愿意在Linux环境方面花费些时间,首先就应该知道日志文件的所在位置以及它们包含的内容.在系统运行正常的情况下学习了解这些不同的日志文件有助于你在遇到紧急情况时从容找出问题并加以解决. 以下介绍的 ...

  4. MSSQLServer基础06(变量,case,选择语句)

    变量 声明:declare @UserName nvarchar(50) 赋值1:set @UserName=N'杨':修改 赋值2:select @UserName=N'牛':修改 输出:print ...

  5. android系统平台显示驱动开发简要:LCD基本原理篇『一』

    平台信息:内核:linux3.4.39系统:android4.4 平台:S5P4418(cortex a9) 作者:瘋耔(欢迎转载,请注明作者) 欢迎指正错误,共同学习.共同进步!! 关注博主新浪博客 ...

  6. php微信2 获取自定义菜单中的access_token

    //自定义菜单中获取access_token    static function get_access_token($appid,$secret){        $url="https: ...

  7. [移动网关]2G环境下资源下载有一定概率失败,客户端日志显示收到403错误

    2G环境下资源下载有一定概率失败,客户端日志显示收到403错误 问题现象: 测试同学在使用联通号码在移动网络环境下,访问连接得到的response_code出现是403,导致资源读取失败表情显示异常. ...

  8. Bash内置命令

    Bash有很多内置命令,因为这些命令是内置的,因此bash不需要在磁盘上为它们定位,执行速度更快. 1)列出所有内置命令列表$enable 2)关闭内置命令test$enable -n test 3) ...

  9. LVDS/RGB转EDP稳定方案----NCS8801S

    目前山寨平板市场已经进入白热化,同质化的竞争.厂商的利润被压得非常的薄.一味的价格战肯定会带来行业洗牌.差异化是许多厂商的选择,而其中一条重要的路子,就是采用高分辨率的down-grade屏.如苹果的 ...

  10. Android开发——Fragment的简单使用总结

    前言: 之前搞项目的时候,就使用了这个Fragment,中间遇到了许多坑,把坑都解决了,现在写一篇较为简单的Fragment使用总结 Fragment的简单介绍: 简单来说,Fragment其实可以理 ...