CSS 伪类与伪元素
CSS的元素选择器除了根据id（#）、class（.）、属性（[ ]）选取元素以外，还有很重要的一类，就是根据元素的特殊状态来选取元素。它们就是伪类和伪元素。跟id选择器、类选择器、属性选择器以及派生选择器等这些从HTML文档层次结构（DOM树）中获取元素不同的是，伪类和伪元素是预定义的、独立于文档元素的。它们获取元素的途径也不是基于id、class、属性这些基础的元素特征，而是在处于特殊状态的元素（伪类），或者是元素中特别的内容（伪元素）。当然，伪类和伪元素的表示形式也使用“:”（英文冒号）与其它选择器相区分。
1.1伪类
伪类选择元素基于的是当前元素处于的状态。状态是动态的，所以一个元素达到一个特定状态时，它可能得到一个伪类的样式；当状态改变时，它又会失去这个样式。它的功能和class有些类似，但它是基于文档之外的抽象，所以叫伪类。
1.1.1用于超连接的伪类
1、语法
:link
伪类将应用于未被访问过（未点击过和鼠标未经过）的链接，与:visited互斥。
:hover
伪类将应用于有鼠标指针悬停于其上的元素。
:active
伪类将应用于被激活的元素（在鼠标点击与释放之间发生的事件）时的样式。
:visited
伪类将应用于已经被访问过的链接，与:link互斥。
2、应用实例
(一)某一个伪类的应用
1>通过对全站超链接样式化方法。
a{
color:#333;
text-decoration:none;
}
a:hover{
color:#CC3300;
text-decoration:underline;
}
2>通过链接内设置类控制超链接样式css方法。
<a href="网址" class="yangshi">CSS</a>
CSS代码
a.yangshi{
color:#333;
text-decoration:none;
}
a.yangshi:hover{
color:#CC3300;
text-decoration:underline;
}
通过这样的设置可以控制链接内的css类名为“yangshi”超链接的样式。
3>通过对应超链接外的父级的css类的css样式来控制超链接的样式。
<div class="yangshi"><a href="网址">CSS</a></div>
CSS代码
.yangshi a{
color:#333;
text-decoration:none;
}
.yangshi a:hover{
color:#CC3300;
text-decoration:underline;
}
注意：a.yangshi与.yangshi a的样式css代码区别。
(二)、四个同时使用
<a href=“网址”>CSS</a>
CSS代码
a:link{
color:#FF0000;
}
a:visited{
color:#00FF00;
}
a:hover{
color:#FF00FF;
}
a:active{
color:#0000FF;
}
注意：在CSS的定义中，同一个元素的:hover必须位于:link、:visited之后才能生效，:active必须位于:hover之后才能生效。
1.1.2其他伪类
:focus
伪类将应用于拥有键盘输入焦点的元素。
:first-child
伪类将应用于元素在页面中第一次出现的时候。
:lang
伪类向带有带有以指定值开头的lang属性的所有元素添加样式。
注意：该值必须是整个单词，即可是单独的，比如 lang="en"，也可后跟连接符，比如 lang="en-us"。
1.2.1应用实例
HTML代码
<body>
<div>
<textarea></textarea>
</div>
<div>
<textarea></textarea>
</div>
<div lang=“zh”>
<textarea></textarea>
</div>
</body>
CSS代码
div:first-child{
background:#0F0;
}
textarea:focus{
background:#F00;
}
div:lang(zh){
background:#00F;
}
1.2伪元素
1.2.1 概述
伪元素是对元素中的特定内容进行操作。它控制的内容实际上和元素是相同的，但是它本身只是基于元素的抽象，并不存在于文档中，所以叫伪元素。
1.2.2 语法
:first-letter
伪元素的样式将应用于元素文本的第一个字（母）。
:first-line
伪元素的样式将应用于元素文本的第一行。
:before
在元素内容的最前面添加新内容。
:after
在元素内容的最后面添加新内容。
1.2.3 CSS content属性
此特性目前已被大部分的浏览器支持：Firefox 1.5+, Safari 3.5+, IE 8+, Opera 9.2+, Chrome 0.2+。另外，目前Opera 9.5+ 和 Safari 4已经支持所有元素的content属性，而不仅仅是:before和:after伪元素。
注意：IE6/7对CSS content属性不支持。
1、基本应用——生成内容
与:before以及:after伪元素组合使用生成文本内容。CSS content属性值除了使用文本值外，还可以使用标签的一些属性值，方法是attr()。
例1：
h2:before{
content:"我是额外文字！";
}
例2：
<a class="content" href="http://www.zhangxinxu.com/">此标签的href值是：</a>
a.content:after{
content: attr(href);
}
注意：当使用attr()获取标签属性名的时候，千万不要添加引号。
2、扩展应用
1>使用计数器创建编号
例：
HTML代码
<body>
<div>
<ul>
<li><img src=＂地址＂width=＂128＂height=＂96＂/></li>
<li><img src=＂地址＂width=＂128＂height=＂96＂/></li>
</ul>
</div>
</body>
CSS代码
ul{
list-style-type:none;
counter-reset:sectioncounter;
}
ul li:before {
content:"the beauty" counter(sectioncounter) ":";
counter-increment:sectioncounter;
}
2>用图片替换文字
例：
HTML代码
<div>
<p>欢迎来到上海，欢迎参观世博会！</p>
</div>
CSS代码
p{
content:url(地址);
width: 10%;
height: 10%;
}
备注：本文介绍的只是经常用到的一些伪类和伪元素。
分享到：
相关推荐
### CSS伪类集合详解 #### 一、概述 CSS伪类是CSS中一种特殊的选择器类型，它们由CSS规范定义并被支持CSS的浏览器自动识别。通过使用这些伪类，开发者能够针对元素的不同状态或者上下文环境应用特定的样式规则。...
CSS 伪类用于向某些选择器添加特殊的效果。CSS 伪元素用于将特殊的效果添加到某些选择器。 可以明确两点，第一两者都与选择器相关，第二就是添加一些“特殊”的效果。这里特殊指的是两者描述了其他 css 无法描述的...
CSS伪类的概念及作用CSS伪类(Pseudoclasses)是选择符的螺栓，用来指定一个或者与其相关的选择符的状态。它们的形式是selector:pseudoclass{property:value;}，简单地用一个半角英文冒号(:)来隔开选择符和伪类。CSS很...
伪元素的前缀使用在CSS3之前是单冒号（:），而在CSS3中推荐使用双冒号（::），以区分伪元素与伪类。伪类是另一种选择器，用来定义元素的特殊状态（如:hover、:active、:focus等）。 在使用伪元素时，必须设置...
在本示例中，"css3 transform属性利用伪元素制作字母卡片开关门"是一个巧妙地应用了transform属性来实现3D效果的例子。 1. **Transform属性的基本用法** - `transform`属性用于定义元素的2D或3D转换。它接受多个...
伪类选择器：CSS中已经定义好的选择器,不能随便取名 常用的伪类选择器是使用在a元素上的几种，`如a:link|a:visited|a:hover|a:active` 提示：在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是...
本教程简单的介绍一下关于CSS伪类:before, :after详解，有需要了解的朋友可以参考一下下。 :before 伪元素在元素之前添加内容 这个伪元素允许创作人员在元素内容的最前面插入生成内容。默认地，这个伪元素是行内元素...
10. **伪类和伪元素**： - **伪类**：如`:link`、`:visited`、`:active`和`:hover`，用于链接的不同状态。 - **伪元素**：如`::first-letter`和`::first-line`，分别影响元素的第一字母和第一行。 11. **定位锚伪...
### CSS3 `:target` 伪类详解 #### 一、引言 随着Web技术的不断进步和发展，CSS3作为新一代的层叠样式表标准，为网页设计带来了诸多强大而实用的功能。其中，`:target`伪类作为一种重要的选择器，在交互式网页设计...
CSS的高级特性，如选择器的组合使用、伪类和伪元素、盒模型、响应式设计（通过媒体查询）、Flexbox和Grid布局，都能在JSP项目中发挥重要作用。了解并熟练运用这些特性，可以使JSP页面在不同设备和视口尺寸下展现出...
结构伪类选择器介绍 结构伪类选择器是用来处理一些特殊的效果。 结构伪类选择器属性说明表 属性 描述 E:first-child 匹配E元素的第一个子元素。 E:last-child 匹配E元素的最后一个子元素。 E:nth-...
### CSS伪类、伪元素与高级选择器详解 #### 一、CSS伪类与伪元素概述 CSS（层叠样式表）是一种用于控制网页样式和布局的语言，它提供了丰富的选择器来帮助开发者更加灵活地控制页面元素。其中，**伪类**和**伪元素...
4. **伪类和伪元素**: 伪类（`:hover`、`:active`、`:focus`等）和伪元素（`::before`、`::after`）用于在特定状态或位置添加样式。 **四、CSS查询工具** 1. **开发者工具**: 浏览器内置的开发者工具提供了检查和...
【CSS伪类`:after`详解】 CSS中的`:after`伪类是一种非常实用的特性，它允许我们在元素内容之后插入额外的非元素内容。这在处理布局、清除浮动、添加装饰性内容等方面尤其有用。本文将深入探讨`:after`伪类的工作...
CSS3引入了更多的选择器，如伪类和伪元素，以及过渡、动画和3D变换等效果，使网页设计更加丰富和动态。 **JavaScript（脚本语言）** JavaScript是一种解释型的、基于原型的编程语言，主要用于网页的客户端脚本。它...