css伪类

提到css伪类,不勉有些惭愧,从事网页制作两年了,竟然没把这个搞清楚。除了大家耳熟能详的在<a>标签里经常用到的那些,对其它的就知之甚少,今天就借此机会和大家一块学习,希望别见笑。

伪类可以看做是选择符在某个特殊状态下的样式。本文主要涉及到以下几种::link、:hover、:active、:visited、:first-child、:lang、:focus、:before、:after。

语法:

伪类的语法是在原来的语法里加上一个伪类:

selector:pseudo-class{property:value;}
选择符:伪类{属性:值}

锚伪类::link、:visited、:hover、:active

在支持Css的浏览器中,链接的不同状态都可以以不同的方式显示,它包括:活动状态,已被访问状态,未被访问的状态和鼠标悬停的状态。它们拥有固定的排列顺序,可以用两个词来记住,love和hate,即link->visited->hover->active,排序是固定的,但每一个状态不是必须的,可写可不写。

:first-child伪类

可以使用:first-child伪类来选择元素的第一个子元素,注意看以下例子:

<div>
	<h1>雨打浮萍</h1>
	<p>专注于web前端开发</p>
	<ul>
		<li>首页</li>
		<li>html+css</li>
		<li>wordpress教程</li>
	</ul>
	<p>我是雨打浮萍</p>
</div>
h1:first-child{
	color:#0c0;
}
li:first-child {
	color:#c00
}

效果如下:

注意:这里的第一个元素是指相对父级而言,他的第一个子标签,div的第一个子标签是h1,ul的第一个子标签是li。而不要理解成第一个h1标签,或者h1标签的第一个子元素。

例2:匹配所有<p>标签的第一个<b>标签

<p><b>雨</b>打浮<b>萍</b></p>
<p><b>专注</b>于web前端开发</p>
p>b:first-child{
	color:#c00;
}

:lang伪类

:lang伪类使你有能力为不同的语言定义特殊的规则。例如:

css:

p:lang(lyh){
	color:#f60;
	font-weight:bold;
}

html:

<p lang="lyh">雨打浮萍</p>
<p>专注于web前端开发</p>

上面的例子中,:lang类为属性值为lyh的p标签定义css样式。IE8以下版本的IE浏览器不支持。效果如下:

:focus伪类

 :focus伪类在元素获得焦点时向元素添加特殊的样式。它应用于有焦点的元素,例如文本输入焦点的输入框,例如:

css:

input{
	width:200px;
	height:18px;
	line-height:18px;
	padding:2px 5px;
	border:1px solid #ccc;
	background-color:#f9f9f9;
	border-radius:3px;
	-webkit-border-radius:3px;
	-moz-border-radius:3px;
}
input:focus{
	background-color:#ffc;
}

html:

<input type="text" />

效果如下(IE8以下版本不支持,左边为正常状态下,右边为获得焦点状态时):

:before和:after伪类

:before和:after伪元素在元素之前(之后)添加内容,它是行内元素,不过可以使用属性display改变这一点。通常与content配合使用,如下例:

css:

h2:before{
	content:"我是“";
}
h2:after{
	content:"“,我是博主";
}

html:

<h2>雨打浮萍</h2>

IE8以下版本不支持,效果显示:

 

content里面除了可以添加文字外,还可以添加音乐、视频等,大家可以亲自操作一下。

这里面顺便提一下,大家应该经常看到,我们用after和content配合使用来清除浮动,看到下面的代码,想必大家就非常熟悉了:

.clearfix:after{
	content:".";
	display:block;
	clear:both;
	visibility:hidden;
	line-height:0;
	height:0;
}

 

css伪类,今天就总结到这,希望对大家有所帮助,也希望大家多多补充,提出宝贵意见。

 

 

马上分享给你的朋友吧~

css伪类》上有 1 条评论

发表评论

电子邮件地址不会被公开。 必填项已用 * 标注

*

您可以使用这些 HTML 标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>