(六)CSS伪元素
CSS伪元素用于向某些选择器设置特殊效果。
伪元素的用法和伪类相似:
selector:pseudo-element {property:value;}
CSS类也可以与伪元素配合使用:
selector.class:pseudo-element {property:value;}
:first-line伪元素:向文本的首行设置特殊样式。
p:first-line
{
color:#ff0000;
font-variant:small-caps;
}
:first-letter伪元素:向文本的首字母设置特殊样式。
p:first-letter
{
color:#ff0000;
font-size:xx-large;
}
CSS2-:before伪元素:可以在元素的内容前面插入新内容。
h1:before
{
content:url(logo.gif);
}
CSS2-:after伪元素:可以在元素的内容之后插入新内容。
h1:after
{
content:url(logo.gif);
}
伪元素和CSS类:
p.article:first-letter
{
color: #FF0000;
}
<p class="article">This is a paragraph in an article。</p>
多重伪元素:可以结合多个伪元素使用
p:first-letter
{
color:#ff0000;
font-size:xx-large;
} p:first-line
{
color:#0000ff;
font-variant:small-caps;
}
(六)CSS伪元素的更多相关文章
- jQuery如何改变css伪元素样式
首先我们看一下css伪元素是什么: CSS 伪元素用于向某些选择器设置特殊效果. 伪元素有哪些: :first-line 伪元素:"first-line" 伪元素用于向文本的首行设 ...
- css 伪元素分享!!!
最近接触到的css 伪元素觉得还算不错 分享下: 1.清楚内盒浮动设置: ;} .back_list ul:after{;visibility: hidden;}/*清楚内盒浮动设置*/ 2.伪元素a ...
- CSS伪类与CSS伪元素的区别及由来
关于两者的区别,其实是很古老的问题.但是时至今日,由于各种网络误传以及一些不负责任的书籍误笔,仍然有相当多的人将伪类与伪元素混为一谈,甚至不乏很多CSS老手.早些年刚入行的时候,我自己也被深深误导,因 ...
- CSS 伪元素
CSS伪元素是用来添加一些选择器的特殊效果. 语法 伪元素的语法: selector:pseudo-element {property:value;} CSS类也可以使用伪元素: selector.c ...
- css伪元素
CSS 伪元素用于向某些选择器设置特殊效果. 1.:first-line 伪元素 "first-line" 伪元素用于向文本的首行设置特殊样式.注意:"first-li ...
- js如何控制css伪元素内容(before,after)
曾经遇到的问题,在对抗UC浏览器屏蔽需要把内容输出到css 伪元素中输出.有个疑问如何用js控制它.于是在segmentfault提问,如下是对问题的整理: 如何用js控制css伪类after 简单粗 ...
- css伪元素用法大全
本文主要讲解css伪元素的用法,有需要的朋友可以阅读此文.本文讲解的伪元素有:before,after. 什么是伪元素(Pseudo element)? 伪元素不是真正的元素,不存在与文档之中,所以j ...
- js分析 汽_车_之_家 js生成css伪元素 hs_kw44_configUS::before
0.参考 https://developer.mozilla.org/zh-CN/docs/Web/CSS/Pseudo-elements https://developer.mozilla.org/ ...
- CSS伪元素before、after妙用
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
随机推荐
- HTTP报文格式
请求报文 <method><SP><uri><SP><version><CRLF> <head-name><: ...
- 【quartz】 入门-配置文件
quartz 启动 NameValueCollection props = (NameValueCollection)ConfigurationManager.GetSection("qua ...
- php 彩票类 lottery
<?php /* * For the full copyright and license information, please view the LICENSE * file that wa ...
- cocos2dx中的动作
CCAction是cocos2dx中专门用来处理动作相关的类,几乎所有的与动作相关的类都是从它派生而来的.而CCAction继承自CCObject class CCFiniteTimeAction : ...
- sql2008还原问题
2003的服务器系统不知是因为对SSD的支持不好还是别的原因,系统使用有很多奇怪的问题,所以就升级一下系统,在备份数据库的时候出现了各种问题 源数据库与现数据库都为sqlserver2008,并都安装 ...
- iOS10相册相机闪退bug-b
iOS10系统下调用系统相册.相机功能,遇到闪退的情况,描述如下: This app has crashed because it attempted to access privacy-sensit ...
- c++ std::string 用法
std::string用法总结 在平常工作中经常用到了string类,本人记忆了不好用到了的时候经常要去查询.在网上摘抄一下总结一下,为以后的查询方便: string类的构造函数: string(co ...
- PE文件结构详解(一)基本概念
PE(Portable Execute) 文件是Windows下可执行文件的总称,常见的有DLL,EXE,OCX,SYS等,事实上,一个文件是否是PE文件与其扩展名无关,PE文件可以是任 何扩展名.那 ...
- Ajax出入江湖
window.onload = initAll; var xhr = false; function initAll() { if (window.XMLHttpRequest) { xhr = ne ...
- SQL语句备忘
SELECT beatid,COUNT(d.id) dongnicount FROM `bed_beat_dongni` d INNER JOIN bed_beat b on b.id = d.bea ...