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

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

  1. <html>
  2. <head>
  3. <style type="text/css">p{　　width:400px}
  4. p:first-line
  5. {
  6. color: #ff0000;
  7. font-variant: small-caps
  8. }p{
  9.  
  10. }
  11. </style>
  12. </head>
  13.  
  14. <body>
  15. <p>
  16. 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
  17. </p>
  18. </body>
  19.  
  20. </html>

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

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

4、:root 为元素

  1. :root{background:orange}
  2. //等同于
  3. 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. Ubuntu频率较高的操作

    一.切换超级用户 由于 Ubuntu 是基于 Debian 的 linux 操作系统,在默认的情况下,是没有超级用户(superuser, root)的,但有些系统操作必须有超级用户的权限才能进行,如 ...

  2. CodeForces 588B

    题目链接 : http://codeforces.com/problemset/problem/588/B 题目大意: 这个题目的意思就是找出一个数中的因子,这个因子满足以下条件: 1.此数的因子没有 ...

  3. 差别不在英语水平，而在汉语水平If you do not leave me, we will die together.

    为什么高考语文要提高到180分,英语降到100,差别不在英语水平,而在汉语水平.看下面例句的译法: If you do not leave me, we will die together. 你如果不 ...

  4. 《Linear Algebra and Its Applications》-chaper3-行列式-行列式初等变换

    承接上一篇文章对行列式的引入,这篇文章将进一步记录关于行列式的有关内容,包括如下的几个方面: (1)行列式3个初等变换的证明. (2)转置行列式与原行列式相等的证明. (3)定理det(AB) = d ...

  5. 《Mathematical Olympiad——数论》——整除

    数论这个东西吧,虽说也是高中IMOer玩的数学游戏,颇具美学性的证明比较多.就目前所知,它在算法里是一些加密技术的基础,不多言,开始具体题目的分析. 问题一:已知数列{an},且a0 = 2 , a1 ...

  6. 60秒找到最对的size？为服饰电商提供尺寸匹配解决方案的True Fit获1500万美元融资 | 36氪

    60秒找到最对的size?为服饰电商提供尺寸匹配解决方案的True Fit获1500万美元融资 | 36氪 60秒找到最对的size?为服饰电商提供尺寸匹配解决方案的True Fit获1500万美元融 ...

  7. 带你一分钟理解 JavaScript 闭包

    什么是闭包? 先看一段代码: function a(){ var n = 0; function inc() { n++; console.log(n); } inc(); inc(); } a(); ...

  8. maven上传自定义jar到本地仓库

    mvn install:install-file  -Dfile=D:/baidu/ueditor-1.1.1.jar  -DgroupId=com.baidu.ueditor  -Dartifact ...

  9. iframe与父页面中JS执行顺序控制

    同事遇到了一个问题: 父页面中有几个iframe,初衷是父页面的JS通过AJAX获取数据,然后用于初始化iframe页面,可以结果却是有的iframe页面却不能获得数据. [问题根源] 父页面在加载i ...

  10. 黑马程序猿_try-catch-finally

    ------- android培训.java培训.期待与您交流! ---------- try-catch-finally中怎样定义语句呢? 1.try块中主要定义可能出现的异常处理语句 2.catc ...