CSS伪元素

伪元素的语法:
selector:pseudo-element {property:value;}
作    用
添加特殊样式

:first-line 伪元素

"first-line" 伪元素用于向某个选择器中的文字的首行添加特殊样式:
p{font-size: 12pt}p:first-line{color: #0000FF;font-variant:small-caps;}<p>Some text that ends up on two or more lines</p>在上面的例子中,浏览器显示根据 first-line 伪元素格式化的第一行。浏览器是依靠浏览器窗口的尺寸来进行分行的。
提示:first-line 伪元素仅能被用于块级元素。
提示:下面的属性可以被应用到 first-line 伪元素。
font 属性color 属性background 属性word-spacingletter-spacingtext-decorationvertical-aligntext-transformline-heightclear

:first-letter 伪元素

first-letter 伪元素用于向某个选择器中的文本的首字母添加特殊的样式:
p{font-size:12pt;}p:first-letter{font-size:200%; float:left;}<p>The first words of an article.</p>输出的效果类似于:
_____ | he first | words of anarticle.font 属性color 属性background 属性margin 属性padding 属性border 属性text-decorationvertical-align (仅当float为none时)text-transformline-heightfloatclear

伪元素和 CSS 类

伪元素可以与 CSS 类配合使用:
p.article:first-letter{color:#FF0000;}<p class="article">文章中的一个段落。</p>上面的例子会使所有 class 为 article 的段落的首字母变为红色。

多重伪元素

多个伪元素可以配合在一起使用:
p{font-size:12pt;}p:first-letter{color:#FF0000; font-size:24pt;}p:first-line{color:#0000FF;}<p>The first words of an article</p>_____ | he first | words of anarticle.在上面的例子中,段落的首字母将是字号为 24pt 的红色。首行的其余部分将会是蓝色,而段落的其余部分会是默认的颜色。

CSS2 - :before 伪元素

before 伪元素可用于在某个元素之前插入某些内容。
:before 伪元素可以加入任意元素可以是文字、视频、图片等
下面的样式会在标题之前播放音频:
h1:before{ content:url(beep.wav);}
下面的样式会在标题之前加入content这个字符串,要注意 content需要用""引号包含起来.
h1:before{content:"content";}
下面的样式会在h1标题前面加入一张图片.
h1:before{content:url(xxx.jpg);}

CSS2 - :after 伪元素

after 伪类可用于在某个元素之后插入某些内容。
下面的样式会在标题之后播放音频:
h1:after{ content:url(beep.wav);}
 
w3school链接:http://www.w3school.com.cn/css/css_pseudo_elements.asp
 

CSS——伪元素的更多相关文章

  1. jQuery如何改变css伪元素样式

    首先我们看一下css伪元素是什么: CSS 伪元素用于向某些选择器设置特殊效果. 伪元素有哪些: :first-line 伪元素:"first-line" 伪元素用于向文本的首行设 ...

  2. css 伪元素分享!!!

    最近接触到的css 伪元素觉得还算不错 分享下: 1.清楚内盒浮动设置: ;} .back_list ul:after{;visibility: hidden;}/*清楚内盒浮动设置*/ 2.伪元素a ...

  3. CSS伪类与CSS伪元素的区别及由来

    关于两者的区别,其实是很古老的问题.但是时至今日,由于各种网络误传以及一些不负责任的书籍误笔,仍然有相当多的人将伪类与伪元素混为一谈,甚至不乏很多CSS老手.早些年刚入行的时候,我自己也被深深误导,因 ...

  4. (六)CSS伪元素

    CSS伪元素用于向某些选择器设置特殊效果. 伪元素的用法和伪类相似: selector:pseudo-element {property:value;} CSS类也可以与伪元素配合使用: select ...

  5. CSS 伪元素

    CSS伪元素是用来添加一些选择器的特殊效果. 语法 伪元素的语法: selector:pseudo-element {property:value;} CSS类也可以使用伪元素: selector.c ...

  6. css伪元素

    CSS 伪元素用于向某些选择器设置特殊效果. 1.:first-line 伪元素  "first-line" 伪元素用于向文本的首行设置特殊样式.注意:"first-li ...

  7. js如何控制css伪元素内容(before,after)

    曾经遇到的问题,在对抗UC浏览器屏蔽需要把内容输出到css 伪元素中输出.有个疑问如何用js控制它.于是在segmentfault提问,如下是对问题的整理: 如何用js控制css伪类after 简单粗 ...

  8. css伪元素用法大全

    本文主要讲解css伪元素的用法,有需要的朋友可以阅读此文.本文讲解的伪元素有:before,after. 什么是伪元素(Pseudo element)? 伪元素不是真正的元素,不存在与文档之中,所以j ...

  9. js分析 汽_车_之_家 js生成css伪元素 hs_kw44_configUS::before

    0.参考 https://developer.mozilla.org/zh-CN/docs/Web/CSS/Pseudo-elements https://developer.mozilla.org/ ...

  10. CSS伪元素before、after妙用

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. Virtualbox中Linux添加新磁盘并创建分区

    原文:https://www.linuxidc.com/Linux/2017-01/139616.htm ----------------------------------------------- ...

  2. SSIS实践入门1:我的第一个SSIS程序开发

    深圳,和你见面已经有23天的时间了,第10天敲定了我人生中的第三份工作,虽说不是和想象中的工作那么好,但是我感觉我已经提前进入了备战状态,接下来我希望自己在你的领土可以有所发展,深圳,一个人多的城市, ...

  3. python2.7里的StringIO.StringIO与BytesIO有什么区别

    import StringIO与from io import BytesIO的区别 open()函数返回的文件对象取决于模式.当使用文本模式打开文件时,它返回一个TextIOBase的子类.当使用二进 ...

  4. webpack 编译less/scss文件

    1.安装插件 处理less: npm install less-loader --save-dev 处理sass: npm install sass-loader --save-dev 2.项目目录: ...

  5. How to make a custom WIDGET in OpenERP

    转自:http://sahotaparamjitsingh.blogspot.com/2012/04/how-to-make-custom-widget-in-openerp.html   Hello ...

  6. sql中同一个Trigger里同时包含Insert,Update,Delete

    sql中同一个Trigger里同时包含Insert,Update,Delete SQLServer是靠Inserted表和Deleted表来处理的,判断一下就可以了,只不过比ORACLE麻烦一点 cr ...

  7. 【Oracle】PL/SQL Developer 快捷键、使用技巧

    1.类SQL PLUS窗口:File->New->Command Window,这个类似于oracle的客户端工具sql plus,但比它好用多了. 2.设置关键字自动大写:Tools-& ...

  8. 一对一关系数据库表 java类描述

    一对一关系中 从表的主键是 主表的外键 sql语句 create table person( id int primary key, name varchar(100) ); create table ...

  9. Redis总结(六)Redis配置文件全解(转载)

    前面已经写了一些关于redis 的介绍,redis 的基本功能和用法,基本上都说了,有问题的可以去看看 http://www.cnblogs.com/zhangweizhong/category/77 ...

  10. 转:Mosquitto配置----日志设置

    1.mosquitto的日志输出方式简介 mosquitto是一个纯C的代码,它的日志输出支持若干中日志输出方式,通过修改配置项:log_dest即可完成对各种日志输出类型的切换,常见的日志输出类型有 ...