一、CSS 伪元素

CSS伪元素是用来添加一些选择器的特殊效果。

语法

伪元素的语法:

selector:pseudo-element {property:value;}

CSS类也可以使用伪元素:

    selector.class:pseudo-element {property:value;}

1.:first-line 伪元素

“first-line” 伪元素用于向文本的首行设置特殊样式。

在下面的例子中,浏览器会根据 “first-line” 伪元素中的样式对 p 元素的第一行文本进行格式化:

    p:first-line {
color:#ff0000;
font-variant:small-caps;
}

注意:“first-line” 伪元素只能用于块级元素。

注意: 下面的属性可应用于 “first-line” 伪元素:

  • font properties
  • color properties
  • background properties
  • word-spacing
  • letter-spacing
  • text-decoration
  • vertical-align
  • text-transform
  • line-height
  • clear

2.:first-letter 伪元素

“first-letter” 伪元素用于向文本的首字母设置特殊样式:

    p:first-letter {
color:#ff0000;
font-size:xx-large;
}

注意: “first-letter” 伪元素只能用于块级元素。

注意: 下面的属性可应用于 “first-letter” 伪元素:

  • font properties
  • color properties
  • background properties
  • margin properties
  • padding properties
  • border properties
  • text-decoration
  • vertical-align (only if “float” is “none”)
  • text-transform
  • line-height
  • float
  • clear

二、伪元素和CSS类

伪元素可以结合CSS类:

    p.article:first-letter {color:#ff0000;}
<p class="article">文章段落</p>

上面的例子会使所有 class 为 article 的段落的首字母变为红色。

1.多个伪元素

可以结合多个伪元素来使用。

在下面的例子中,段落的第一个字母将显示为红色,其字体大小为 xx-large。第一行中的其余文本将为蓝色,并以小型大写字母显示。

段落中的其余文本将以默认字体大小和颜色来显示:

    p:first-letter
{
color:#ff0000;
font-size:xx-large;
}
p:first-line
{
color:#0000ff;
font-variant:small-caps;
}

2.CSS - :before 伪元素

“:before” 伪元素可以在元素的内容前面插入新内容。

下面的例子在每个 <h1>元素前面插入一幅图片:

    h1:before {
content:url(smiley.gif);
}

3.CSS - :after 伪元素

“:after” 伪元素可以在元素的内容之后插入新内容。

下面的例子在每个 <h1> 元素后面插入一幅图片:

    h1:after {
content:url(smiley.gif);
}

所有CSS伪类/元素

教你玩转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/ ...

随机推荐

  1. Oracle删除表中的重复数据

    Oracle数据库删除表中的重复数据,只保留其中的一条,以两个字段为例,提供两种方法 ①.直接delete重复的数据 delete from table_name t1 where (t1.col1, ...

  2. js部分知识整理,google浏览器的代码调试

    整理一些学过的js知识点,包括js中3个括号的含义,this的使用,递归,google浏览器的代码调试.Location的属性及常用方法,window对象常用方法,open方法等. js括号 在js中 ...

  3. OutOfMemoryError系列

    OutOfMemoryError系列 1.[OutOfMemoryError系列(1): Java heap space](https://blog.csdn.net/renfufei/article ...

  4. docker学习一

    由于本人学习精力有限,不能像大学时那样,每个笔记都认真的手敲记录,一些地方会截图展示,并会添加自己的理解和备注,建议大家也做自己的笔记,看别人的可以,但是自己动手并思考记忆更深刻. 1.什么是虚拟化 ...

  5. inceptor es表插入成功,返回报错you should set transaction.type before any DCL statement

    在finebi下用星环的连接驱动去写inceptor es表,发现插入能成功,但是返回一个报错: Caused by: java.sql.SQLException: Error to commit. ...

  6. Codeforces Round #316 (Div. 2) D. Tree Requests(dsu)

    题目链接 题意:对于m次询问 求解以vi为根节点 深度为hi的的字母能不能组合成回文串. 思路:暴力dsu找一边 简直就是神技! #include<bits/stdc++.h> #defi ...

  7. Educational Codeforces Round 90 (Rated for Div. 2) C. Pluses and Minuses(差分)

    题目链接:https://codeforces.com/contest/1373/problem/C 题意 给出一个只含有 $+$ 或 $-$ 的字符串 $s$,按如下伪代码进行操作: res = 0 ...

  8. 【noi 2.6_9265】取数游戏(DP)

    题意:从自然数1到N中不取相邻2数地取走任意个数,问方案数. 解法:f[i][1]表示在前i个数中选了第i个的方案数,f[i][0]表示没有选第i个.f[i][1]=f[i-1][0];  f[i][ ...

  9. UVA11400 Lighting System Design(DP)

    You are given the task to design a lighting system for a huge conference hall. After doing a lot of ...

  10. hdu2546 饭卡

    Problem Description 电子科大本部食堂的饭卡有一种很诡异的设计,即在购买之前判断余额.如果购买一个商品之前,卡上的剩余金额大于或等于5元,就一定可以购买成功(即使购买后卡上余额为负) ...