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. HDU 4185 Oil Skimming

    题目大意:在一个N*N的矩阵里寻找最多有多少个“##”(横着竖着都行).     题目分析:重新构图,直接以相邻的两个油井算中间算以条边,然后进行匹配,看看两两之间最多能匹配多少对. #include ...

  2. 【转】Android自定义Adapter的ListView的思路及代码

    原文网址:http://www.jb51.net/article/37236.htm Android自定义Adapter的ListView的思路及代码,需要的朋友可以参考一下   在开发中,我们经常使 ...

  3. （转载）php curl_init函数用法

    (转载)http://blog.sina.com.cn/s/blog_640738130100tsig.html 使用PHP的cURL库可以简单和有效地去抓网页.你只需要运行一个脚本,然后分析一下你所 ...

  4. 搜索(DLX)： POJ 3074 3076 Sudoku

    POJ 3074 : Description In the game of Sudoku, you are given a large 9 × 9 grid divided into smaller ...

  5. QDomDocument Access violation writing location

    今天犯了一个非常2的错误! 为了将面板参数保存起来,选择用QDomDocument构造Dom树,然后用doc.toString()方法返回符合xml格式的QString.如: QString CutF ...

  6. cf703A Mishka and Game

    A. Mishka and Game time limit per test 1 second memory limit per test 256 megabytes input standard i ...

  7. curl 模拟ajax 请求

    主要是在header请求里加一个  X-Requested-With: XMLHttpRequest curl -v -H "X-Requested-With: XMLHttpRequest ...

  8. Java学习的随笔（2）Java语言的三大特性

    1.面向对象的三大特性 面向对象的三大特性主要包括:继承.封装.多态 (1)继承:就是指子类(导出类)获得了基类的全部功能(所有的域和方法).  注:在子类中,想要调用基类的方法可以使用“super. ...

  9. HTTP协议和WEB应用

    一.应用层协议原理 1.套接字(Socket):主机地址+端口地址.(通常为32位IP地址和16位端口号组成,总长度为48位) 2.进程通过套接字来接收和发送报文.因特网运输层将所提供的服务整合成两种 ...

  10. [每日一题] OCP1z0-047 :2013-08-14 如何理解USING INDEX?...................................41

    正确答案:B 一.USING INDEX的实验: .USING INDEX可以让你在创建主键.唯一性约束的时候使用指定的索引或创建索引.或修改索引的存储结构. OK,我先不用USING INDEX,创 ...