web前端-CSS 伪元素 -023
来源:互联网 发布:自考培训机构 知乎 编辑:程序博客网 时间:2024/06/08 09:51
语法
伪元素的语法:
selector:pseudo-element {property:value;}
CSS类也可以使用伪元素:
selector.class:pseudo-element {property:value;}
:first-line 伪元素
“first-line” 伪元素用于向文本的首行设置特殊样式。
在下面的例子中,浏览器会根据 “first-line” 伪元素中的样式对 p 元素的第一行文本进行格式化:
<!DOCTYPE html><html><head><meta charset="utf-8"> <title>www.baidu.com</title> <style>p:first-line {color:#ff0000;font-variant:small-caps;}</style></head><body><p>你可以使用 "first-line" 伪元素向文本的首行设置特殊样式。你可以使用 "first-line" 伪元素向文本的首行设置特殊样式你可以使用 "first-line" 伪元素向文本的首行设置特殊样式你可以使用 "first-line" 伪元素向文本的首行设置特殊样式</p></body></html>
运行结果:
注意:”first-line” 伪元素只能用于块级元素。
注意: 下面的属性可应用于 “first-line” 伪元素:
- font properties
- color properties
- background properties
- word-spacing
- letter-spacing
- text-decoration
- vertical-align
- text-transform
- line-height
- clear
:first-letter 伪元素
“first-letter” 伪元素用于向文本的首字母设置特殊样式:
<!DOCTYPE html><html><head><meta charset="utf-8"> <title>www.baidu.com</title> <style>p:first-letter { color:#ff0000; font-size:xx-large;}</style></head><body><p>你可以使用 "first-letter" 伪元素向文本的首字母设置特殊样式:</p></body></html>
运行结果:
注意: “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
- clea
伪元素和CSS类
伪元素可以结合CSS类:
p.article:first-letter {color:#ff0000;}<p class="article">A paragraph in an article</p>
上面的例子会使所有 class 为 article 的段落的首字母变为红色。
Multiple Pseudo-elements
可以结合多个伪元素来使用。
在下面的例子中,段落的第一个字母将显示为红色,其字体大小为 xx-large。第一行中的其余文本将为蓝色,并以小型大写字母显示。
段落中的其余文本将以默认字体大小和颜色来显示:
<!DOCTYPE html><html><head><meta charset="utf-8"> <title>www.baidu.com</title> <style>p:first-letter{ color:#ff0000; font-size:xx-large;}p:first-line { color:#0000ff; font-variant:small-caps;}</style></head><body><p>你可以结合使用"first-line"和"first-letter"伪元素向文本的首行和首字母设置特殊样式。</p></body></html>
运行结果:
CSS - :before 伪元素
“:before” 伪元素可以在元素的内容前面插入新内容。
下面的例子在每个 <h1>
元素前面插入一幅图片:
<!DOCTYPE html><html><head><meta charset="utf-8"> <title>www.baidu.com</title> <style>h1:before {content:url(smiley.gif);}</style></head><body><h1>This is a heading</h1><p>The :before pseudo-element inserts content before an element.</p><h1>This is a heading</h1><p><b>注意:</b>仅当 !DOCTYPE 已经声明 IE8 支持这个内容属性</p></body></html>
运行结果:
CSS - :after 伪元素
“:after” 伪元素可以在元素的内容之后插入新内容。
下面的例子在每个 <h1>
元素后面插入一幅图片:
<!DOCTYPE html><html><head><meta charset="utf-8"> <title>www.baidu.com</title> <style>h1:after {content:url(smiley.gif);}</style></head><body><h1>This is a heading</h1><p>The :after pseudo-element inserts content after an element.</p><h1>This is a heading</h1><p><b>注意:</b>仅当!DOCTYPE 已经声明 IE8支持这个内容属性.</p></body></html>
运行结果:
所有CSS伪类/元素
0 0
- web前端-CSS 伪元素 -023
- WEB前端 -- CSS伪类、伪元素选择器
- web前端-CSS 伪类 -022
- 【从0到1学Web前端】CSS伪类和伪元素
- 【从0到1学Web前端】CSS伪类和伪元素
- web前端-HTML元素-002
- css 伪类 伪元素
- css伪类,伪元素
- CSS 伪元素 伪类
- CSS伪类、伪元素
- web前端开发笔记:CSS伪类总结
- 【WEB前端】3.CSS内联元素和块元素
- web前端-HTML CSS-009
- web前端-CSS语法-001
- web前端-CSS创建-003
- web前端-CSS Backgrounds-004
- css:after 伪元素
- CSS伪元素
- 占位22
- JavaScript事件模型
- Android开发之——FilenameFilter文件过滤器
- Python-smtplib
- 练习
- web前端-CSS 伪元素 -023
- target is null for setProperty(null,)错误的引发原因及解决办法
- iOS崩溃日志的处理
- Test
- Javascript—XHR/AJAX/跨域
- iptables四个表与五个链间的处理关系
- python学习笔记 -- bin()方法
- 五、Liunx 文件权限管理(三) 修改文件权限
- tomcat cpu暴涨的原因之一及其解决方法