CSS 伪类与伪元素详解

最新推荐文章于 2024-07-25 10:18:55 发布

iteye_16353

最新推荐文章于 2024-07-25 10:18:55 发布

阅读量147

点赞数

分类专栏： css 文章标签： css

本文链接：https://blog.csdn.net/iteye_16353/article/details/82651978

版权

css 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

[align=center]CSS 伪类与伪元素[/align]

CSS的元素选择器除了根据id（#）、class（.）、属性（[ ]）选取元素以外，还有很重要的一类，就是根据元素的特殊状态来选取元素。它们就是伪类和伪元素。跟id选择器、类选择器、属性选择器以及派生选择器等这些从HTML文档层次结构（DOM树）中获取元素不同的是，伪类和伪元素是预定义的、独立于文档元素的。它们获取元素的途径也不是基于id、class、属性这些基础的元素特征，而是在处于特殊状态的元素（伪类），或者是元素中特别的内容（伪元素）。当然，伪类和伪元素的表示形式也使用“:”（英文冒号）与其它选择器相区分。
[b]1.1伪类[/b]
伪类选择元素基于的是当前元素处于的状态。状态是动态的，所以一个元素达到一个特定状态时，它可能得到一个伪类的样式；当状态改变时，它又会失去这个样式。它的功能和class有些类似，但它是基于文档之外的抽象，所以叫伪类。
[b]1.1.1用于超连接的伪类[/b]
[b]1、语法[/b]
:link
伪类将应用于未被访问过（未点击过和鼠标未经过）的链接，与:visited互斥。
:hover
伪类将应用于有鼠标指针悬停于其上的元素。
:active
伪类将应用于被激活的元素（在鼠标点击与释放之间发生的事件）时的样式。
:visited
伪类将应用于已经被访问过的链接，与:link互斥。
[b]2、应用实例[/b]
(一)某一个伪类的应用
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;
}
[color=red]注意：a.yangshi与.yangshi a的样式css代码区别。[/color]
(二)、四个同时使用
<a href=“网址”>CSS</a>
CSS代码
a:link{
color:#FF0000;
}
a:visited{
color:#00FF00;
}
a:hover{
color:#FF00FF;
}
a:active{
color:#0000FF;
}
[color=red]注意：在CSS的定义中，同一个元素的:hover必须位于:link、:visited之后才能生效，:active必须位于:hover之后才能生效。[/color]
[b]1.1.2其他伪类[/b]
:focus
伪类将应用于拥有键盘输入焦点的元素。
:first-child
伪类将应用于元素在页面中第一次出现的时候。
:lang
伪类向带有带有以指定值开头的lang属性的所有元素添加样式。
[color=red]注意：该值必须是整个单词，即可是单独的，比如 lang="en"，也可后跟连接符，比如 lang="en-us"。[/color]
[b]1.2.1应用实例[/b]
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;
}
[b]1.2伪元素[/b]
[b]1.2.1 概述[/b]
伪元素是对元素中的特定内容进行操作。它控制的内容实际上和元素是相同的，但是它本身只是基于元素的抽象，并不存在于文档中，所以叫伪元素。
[b]1.2.2 语法[/b]
:first-letter
伪元素的样式将应用于元素文本的第一个字（母）。
:first-line
伪元素的样式将应用于元素文本的第一行。
:before
在元素内容的最前面添加新内容。
:after
在元素内容的最后面添加新内容。
[b]1.2.3 CSS content属性[/b]
此特性目前已被大部分的浏览器支持：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属性不支持。
[b]1、基本应用——生成内容[/b]
与: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()获取标签属性名的时候，千万不要添加引号。
[b]2、扩展应用[/b]
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%;
}
[color=blue]备注：本文介绍的只是经常用到的一些伪类和伪元素。[/color]

iteye_16353

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS 伪类与伪元素详解

[align=center]CSS 伪类与伪元素[/align] CSS的元素选择器除了根据id（#）、class（.）、属性（[ ]）选取元素以外，还有很重要的一类，就是根据元素的特殊状态来选取元素。它们就是伪类和伪元素。跟id选择器、类选择器、属性选择器以及派生选择器等这些从HTML文档层次结构（DOM树）中获取元素不同的是，伪类和伪元素是预定义的、独立于文档元素的。它们获取元素...
复制链接

扫一扫

专栏目录