CSS 伪元素用于向某些选择器设置特殊效果。

1、:first-line 伪元素  "first-line" 伪元素用于向文本的首行设置特殊样式。注意："first-line" 伪元素只能用于块级元素。

<html>
<head>
<style type="text/css">p{　　width:400px}
p:first-line
{
color: #ff0000;
font-variant: small-caps
}p{

}
</style>
</head>

<body>
<p>
You can use the :first-line pseudo-element to add a special effect to the first line of a text!wqdd qwd gege sf whwhjssf wrfq hywwvcwef dqivivzvqoiwvduocvqd
</p>
</body>

</html>

2、:first-letter 伪元素  "first-letter" 伪元素用于向文本的首字母设置特殊样式；注意："first-letter" 伪元素只能用于块级元素。类似于：first-line

3、：after 伪元素 ":after" 伪元素可以在元素的内容之后插入新内容。

4、:root 为元素

:root{background:orange}
//等同于
html {background:orange;}

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. js如何控制css伪元素内容（before，after）

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

  7. css伪元素用法大全

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

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

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

  9. CSS伪元素before、after妙用

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

随机推荐

  1. 图论（网络流）：[CTSC2001]终极情报网

    [CTSC2001]终极情报网 [题目描述] 在最后的诺曼底登陆战开始之前,盟军与德军的情报部门围绕着最终的登陆地点展开了一场规模空前的情报战. 这场情报战中,盟军的战术是利用那些潜伏在敌军内部的双重 ...

  2. 主席树：POJ2104 K-th Number (主席树模板题)

    K-th Number Time Limit: 20000MS   Memory Limit: 65536K Total Submissions: 44952   Accepted: 14951 Ca ...

  3. 【字符串】【最小表示法】Vijos P1683 有根树的同构问题

    题目链接: https://vijos.org/p/1683 题目大意: 给M棵树,每棵N个点,N-1条边,树边有向,问哪些树同构. 题目思路: [字符串][最小表示法] 用()表示一个节点,那么三个 ...

  4. 使用yum快速升级CentOS 6.5内核到 3.10.28

    网上有不少升级CentOS内核的文章,如<CentOS 6.5 升级内核到 3.10.28>,大部分都是下载源码编译,有点麻烦. 在yum的ELRepo源中,有mainline(3.13. ...

  5. HDU 4800/zoj 3735 Josephina and RPG 2013 长沙现场赛J题

    第一年参加现场赛,比赛的时候就A了这一道,基本全场都A的签到题竟然A不出来,结果题目重现的时候1A,好受打击 ORZ..... 题目链接:http://acm.hdu.edu.cn/showprobl ...

  6. 环境搭建之maven分布式系统

    shoppingmall项目: 一.父工程  shoppingmall-parent  (packaging为pom) 此是本项目的顶级工程,所有子工程都应该继承他,主要可承担以下任务: a.集中定义 ...

  7. javaweb项目的优化 - 几番思念

    简单地来看一个浏览器用户访问的流程: 浏览器->服务器->返回结果显示  这么简单地看,可能想得到的优化手段很少,常见的可能就是优化sql,加快数据库处理:加个缓存,加快返回:使用静态文件 ...

  8. Servlet跳转

    方便自己查询,嫌低级的勿喷.... 在Servlet中跳转有两种: 1.客户端跳转 在Servlet中要进行客户端跳转(地址栏的地址信息将发生改变),直接使用HttpServletResponse接口 ...

  9. C#中操作WMI的类库-实现远程登录共享

    WMI是Windows Management Instrumentation的简称,即:视窗管理规范.在Windows 2000或以后的版本中均安装得有,NT4.0则需要安装WMI的核心组件.通过WM ...

  10. mongoDB的基本使用----飞天博客

    Mongo的介绍:这个mongoDB官网说的好啊,MongoDB是一个开源的基于document的数据库,并且是优秀的NoSQL数据库,并且它是用C++写滴哈,非常有效率.一些什么特点呢? 全索引支持 ...