图解css3:核心技术与案例实战. 2.10 伪元素

简介:

2.10 伪元素

除了伪类,CSS3还支持访问伪元素。伪元素可用于定位文档中包含的文本,但无法在文档树中定位。伪类一般反映无法在CSS中轻松或可靠地检测到的某个元素属性或状态;另一方面,伪元素表示DOM外部的某种文档结构。

伪元素其实在CSS中一直存在,大家平时看到的有“:first-line”、“:first-letter”、“:before”和“:after”。 CSS3中对伪元素进行了一定的调整,在以前的基础上增加一个冒号,也就相应的变成了“::first-letter”、“::first-line”、“::before”和“::after”,另外伪元素还增加了一个“::selection”。

或许大家会问,为什么要使用两个冒号?对于IE 6~8,仅支持单冒号表示法,而现代浏览器同时支持这两种表示法。另外一个区别是,双冒号与单冒号在CSS3中主要用来区分伪类和伪元素。到目前来说,这两种方式都是被浏览器接受的。接下来简单介绍一下伪类元素的作用。

2.10.1 伪元素::first-letter

“::first-letter”用来选择文本块的第一个字母,除非在同一行中包含一些其他元素。“::first-letter”通常用于给文本元素添加排版细节,例如下沉字母或首字母,下面的代码是如何使用“::first-letter”创建首字下沉。

p:first-child::first-letter {

  float: left;

  color: #903;

  padding: 4px 8px 0 3px;

  font:75px/60px  Georgia;

}

效果如图2-48所示。

2.10.2 伪元素::first-line

“::first-line”的使用和“::first-letter”类似,也常用于文本排版方面,只不过“::first-line”用来匹配元素的第一行文本,可以应用一些特殊的样式,给文本添加一些细微的区别。“::first-line”将匹配block、inline-block、table-caption、table-cell等级别元素的第一行,来看一个简单的例子。

p:last-child::first-line {

  font: italic 16px/18px Georgia;

  color: #903;

}

上面的代码意味着最后一个段落的第一行文字显示为红色斜体,如图所示2-49所示。

2.10.3 伪元素::before和::after

对于“::before”和“::after”来说,大家并不多见,但“:before”和“:after”,或许不会陌生,因为清除浮动就使用这两个伪类。

“::before”和“::after”不是指存在于标记中的内容,而是可以插入额外内容的位置。尽管生成的内容不会成为DOM的一部分,但它同样可以设置样式。

要为伪元素生成内容,还需要配合content属性。例如,假设在页面上所有外部链接之后的括号中附加它们所指向的URL,无须将URL硬编码到标记中,可以结合使用一个属性选择器和“::after”伪元素。

a[herf^=http]::after {

  content:"(" attr(herf) ")";

}

如今在CSS3中使用“::before”和“::after”越来越多见,例如给链接添加ICON的效果。Font Awesome站点制作的ICON就使用伪元素“::before”和“::after”,下面截取部分代码。

/*  Font Awesome styles

    ------------------------------------------------------- */

[class^="icon-"]:before,

[class*=" icon-"]:before {

  font-family: FontAwesome;

  font-weight: normal;

  font-style: normal;

  display: inline-block;

  text-decoration: inherit;

}

a [class^="icon-"],

a [class*=" icon-"] {

  display: inline-block;

  text-decoration: inherit;

}

/* makes the font 33% larger relative to the icon container */

.icon-large:before {

  vertical-align: middle;

  font-size: 1.3333333333333333em;

}

.btn [class^="icon-"],

.nav-tabs [class^="icon-"],

.btn [class*=" icon-"],

.nav-tabs [class*=" icon-"] {

  /* keeps button heights with and without icons the same */

 

  line-height: .9em;

}

li [class^="icon-"],

li [class*=" icon-"] {

  display: inline-block;

  width: 1.25em;

  text-align: center;

}

li .icon-large:before,

li .icon-large:before {

  /* 1.5 increased font size for icon-large * 1.25 width */

 

  width: 1.875em;

}

ul.icons {

  list-style-type: none;

  margin-left: 2em;

  text-indent: -0.8em;

}

ul.icons li [class^="icon-"],

ul.icons li [class*=" icon-"] {

  width: .8em;

}

ul.icons li .icon-large:before,

ul.icons li .icon-large:before {

  /* 1.5 increased font size for icon-large * 1.25 width */

  vertical-align: initial;

}

.icon-bullhorn::before {

  content: "\f0a1";

}

.icon-beaker::before {

content: "\f0c3";

}

效果如图2-50所示。

 

图2-50 Font Awesome制作ICON

意     图2-50效果还需要配合CSS3的@font-face特性,后续章节会进行详细介绍。

 

2.10.4 伪元素::selection

“::selection”是用来匹配突出显示的文本。浏览器默认情况下,选择网站文本是深蓝的背景,白色的字体,如图2-51所示。

 

图2-51 浏览器默认突出文本的效果

有的设计需要一个与众不同的效果,此时“::selection”就非常实用。不过浏览器对“::selection”支持并不完美,在整个IE 系列中仅有IE 9支持,Firefox也需要加上其私有属性“-moz”。不过值得庆幸的是,Webkit内核浏览器支持,其正确的使用如下。

/*Webkit,Opera9.5+,IE 9+*/

::selection {

  background: 颜色值;

    color: 颜色值;

}

/*Mozilla Firefox*/

::-moz-selection {

  background: 颜色值;

    color: 颜色值;

}

一起来看看W3cplus12上的使用。

::selection {

  background: red;

  color: #fff;

}

::-moz-selection {

  background: red;

  color: #fff;

}

此时选择文本时,背景是大红色,前景色是白色,如图2-52所示。

 

图2-52 ::selection伪元素突出文本效果

注意   伪元素::selection仅接受两个属性,一个是background,另一个是color。

相关文章
|
1月前
|
Web App开发 前端开发 JavaScript
关于 Web 开发中的 CSS before 伪元素
关于 Web 开发中的 CSS before 伪元素
21 0
|
3月前
|
前端开发 JavaScript
css中什么是伪类?伪类,伪元素有哪些?区别是什么?
css中什么是伪类?伪类,伪元素有哪些?区别是什么?
52 1
|
8天前
|
前端开发
css伪类伪元素都有哪些区别是什么
css伪类伪元素都有哪些区别是什么
7 2
|
22天前
|
前端开发
css子类选择器的应用场景实战
css子类选择器的应用场景实战
22 0
|
23天前
|
前端开发
css3 纯代码案例
css3 纯代码案例
27 0
|
24天前
|
前端开发 JavaScript 开发者
优化CSS重置过程:探索CSS层叠技术的应用与优势
这篇文章介绍了一种名为CSS层叠的技术,用于优化CSS重置过程。它解释了CSS重置的概念,即通过删除浏览器默认样式来确保在不同浏览器上呈现一致的外观。然后,它引入了CSS层叠技术,以更好地控制样式的层次结构和优先级。
|
30天前
|
存储 前端开发 算法
【正在完善】高级CSS特效解析其示范案例
【正在完善】高级CSS特效解析其示范案例
118 0
|
30天前
|
前端开发 UED
不可或缺的前端技术之CSS选择器
CSS选择器是前端开发中不可或缺的技术,它能够通过简洁而强大的语法来选择网页中的元素,并对其进行样式的设置。本文将介绍CSS选择器的基本用法和常见类型,帮助读者更好地掌握前端开发中的样式选择技巧。
|
1月前
|
自然语言处理 前端开发 UED
CSS 中的伪装大师:伪类和伪元素的奇妙世界
CSS 中的伪装大师:伪类和伪元素的奇妙世界
CSS 中的伪装大师:伪类和伪元素的奇妙世界
|
1月前
|
前端开发
CSS总结笔记+案例(下)
CSS总结笔记+案例
37 1