CSS2中的伪类与伪元素
CSS 伪类用于向某些选择器添加特殊的效果。
我们最常见的就是有超链接的时候,向下面这样
a:link {color: #FF0000} /* 未访问的链接 */
a:visited {color: #00FF00} /* 已访问的链接 */
a:hover {color: #FF00FF} /* 鼠标移动到链接上 */
a:active {color: #0000FF} /* 选定的链接 */
首先来看一下伪类的定义形式吧
伪类的语法:
selector : pseudo-class {property: value}
CSS 类也可与伪类搭配使用。
selector.class : pseudo-class {property: value}
a.red : visited {color: #FF0000}
<a class="red" href="css_syntax.asp">CSS Syntax</a>
我们经常是会用到的伪类如下:

CSS 伪元素用于向某些选择器设置特殊效果。
语法:
伪元素的语法:
selector:pseudo-element {property:value;}
CSS 类也可以与伪元素配合使用:
selector.class:pseudo-element {property:value;}
p.article:first-letter
{
color: #FF0000;
} <p class="article">This is a paragraph in an article。</p>
上面的例子会使所有 class 为 article 的段落的首字母变为红色。

虽然简单,但是容易忘记。。。
CSS2中的伪类与伪元素的更多相关文章
- css中伪类和伪元素的区别
转载:http://www.cnblogs.com/ihardcoder/p/5294927.html CSS3伪类和伪元素的特性和区别 前端er们大都或多或少地接触过CSS伪类和伪元素,比如最常 ...
- CSS3 动态生成内容(在Web中插入内容)====CSS的伪类或者伪元素
# css3 .类:伪类::伪元素 /* CSS3伪元素/伪类 :https://www.w3.org/TR/css3-selectors/#selectors ::selection 伪元素(F12 ...
- CSS中伪类及伪元素用法详解
CSS中伪类及伪元素用法详解 伪类的分类及作用: 注:该表引自W3School教程 伪元素的分类及作用: 接下来让博主通过一些生动的实例(之前的作业或小作品)来说明几种常用伪类的用法和效果,其他的 ...
- 关于css中伪类及伪元素的总结
css中的伪类和伪元素总是混淆,今天参考了很多资料,也查看了部分文档,现将伪类及伪元素总结如下: 一.由来: 伪类和伪元素的引入都是因为在文档树里有些信息无法被充分描述,比如CSS没有"段落 ...
- CSS中的伪类与伪元素
在前端开发中,大家或多或少的有接触过CSS伪类和伪元素,使用伪元素的时候,总感觉和伪类很相似,但又不能详细的说出两者的区别和联系,那么两者到底有什么区别和联系呢? 在 W3C 中定义: 伪类:用于向某 ...
- css中伪类与伪元素的区别
一:伪类:1:定义:css伪类用于向某些选择器添加特殊效果. 伪类其实与普通的css类相类似,可以为已有的元素添加样式,但是他只有处于dom无法描述的状态下才能为文档树中的元素添加样式,所以将其称为伪 ...
- ::before ::after CSS3中的伪类和伪元素
::before和::after伪元素的用法 一.介绍 css3为了区分伪类和伪元素,伪元素采用双冒号写法. 常见伪类——:hover,:link,:active,:target,:not(),:fo ...
- 前端开发 CSS中你所不知道的伪类与伪元素的区别--摘抄
做过前端开发的人都熟悉伪类与伪元素,而真正能够彻底了解这二者的区别的人并不多.伪类与伪元素确实很容易混淆. 伪元素主要是用来创建一些不存在原有dom结构树种的元素,例如:用::before和::aft ...
- 妙味css3课程---1-2、css3中新增的伪类和伪元素有哪些
妙味css3课程---1-2.css3中新增的伪类和伪元素有哪些 一.总结 一句话总结: 1.div:target{}是什么意思? 比如a标签的锚点链接到div,div:target{}就可以找到这个 ...
- css中伪类和伪元素
伪类和伪元素时对那些我们不能通过class.id等选择元素的补充 伪类的操作对象是文档树中已有的元素(可以给已有元素加了一个类替代),而伪元素则创建了一个文档数外的元素(可以添加一个新元素替代) CS ...
随机推荐
- [Backbone] Working with forms
Our first step is to add a template to the AppointmentForm below. Have the template produce a form w ...
- [Backbone]2. More detail in Models
Our Appointment model doesn't seem too useful yet. Add two default attributes, title as the string & ...
- EM算法求高斯混合模型參数预计——Python实现
EM算法一般表述: 当有部分数据缺失或者无法观察到时,EM算法提供了一个高效的迭代程序用来计算这些数据的最大似然预计.在每一步迭代分为两个步骤:期望(Expectation)步骤和最大化( ...
- linux下apache的使用
Linux安装配置apache http://www.cnblogs.com/fly1988happy/archive/2011/12/14/2288064.html 1.获取软件: http://h ...
- wepy - 安装less/sass
关于sass\less,在wepy文档里寻找 演示安装,默认已经安装了less,我们需要安装的是scss 安装less或scss yarn yarn add wepy-compiler-sass np ...
- Java从零开始学五(数据类型转换)
一.数据类型转换 分为“自动类型转换”和“强制类型转换” 二.自动类型转换 低级别------>高级别 byte b=7; int i=b; System.out.println("i ...
- No configuration found for the specified action解决办法(转)
使用Struts2,配置一切正常,使用常用tag也正常,但是在使用<s:form>标记时,发现控制台总是输出警告信息, 警告信息内容如下: 警告: No configuration fou ...
- Jacoco覆盖率工具使用
Jacoco介绍 Jacoco是一个开源的覆盖率工具.Jacoco可以嵌入到Ant .Maven中,并提供了EclEmma Eclipse插件,也可以使用JavaAgent技术监控Java程序.很多第 ...
- Web 应用性能提升的 10 个建议
建议一.利用反向代理服务器加速和保护应用 如果 Web 应用运行在一台独立的电脑上,性能问题的解决方案是显而易见的:换一台更快的电脑,里面加上更多的处理器.内存.快速磁盘阵列等等.然后在这台新电脑上运 ...
- Tomcat启动时选择加载项目
到tomcat\conf\Catalina\localhost下新建文件:myapp.xml 内容如下: <Context path="/myapp" docBase=&qu ...