您的位置：首页 > Web前端 > CSS

CSS伪类

2016-03-07 14:30 627 查看

CSS伪类

css中的所有伪类。(还有选择)

简单实例：

a:link{
color:red;   /*未访问的连接 */
}
a:visited{
color:green; /*已经的连接*/
}
a:hover{
color:black; /*当鼠标悬浮在连接上的时候*/
}
a:active{
color:yellow;  /*被选中的连接 就是当鼠标按下去（选中） 当还没有抬起*/
}

这里还要注意一哈顺序：

css定义中；a:hover 必须位于a:link和a:visited之后，才能生效；

css定义中；a:active 必须位于a:hover 之后才能生效；

input:focus{
background-color:yellow;
}

:first-child伪类

如果已规定 !DOCTYPE，那么 Internet Explorer 8 （以及更高版本）支持 :focus 伪类。

<!DOCTYPE html >
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
p:first-child {
font-weight: bold;
}
p:before{
content:"-p之前的东西";
color:green;
}
p:after {
content:"-p之后的东西";
color:red;
}

</style>
</head>

<body>
<P>第一个p</P>
<P>第二个p</P>
<P>第三个p</P>
<P>第四个p</P>

</body>
</html>

为了保证 :first-child 伪类在 IE 中正常工作，必须声明 <!DOCTYPE>。

:after在IE8中运行，必须声明<!DOCTYPE>

接下来继续我们的after和before的学习使用滴呀

需要注意的是：

如果没有我们content属性；伪元素将没有任何作用；同时插入的内容，是一个行内元素；

并且在我们的html代码中是看不到滴呀

我们还可以给content中指定图片

p:before{
content:url(images/02.jpg);
width:100px;
height:100px;
display:block;

}
p:after{
content:url(images/01.jpg);
width:100px;
height:100px;
display:block;
}

你会发现指定的了大小，并没有卵用滴呀，那是因为指定的是content的大小，而不是我们图片的大小滴呀!

将content中内容设置为空，给它添加背景；你就可以理解上面的

p:before{
content:" ";
width:100px;
height:100px;
display:inline-block;
background: url(images/01.jpg);

}
p:after{
content:"";
width:100px;
height:100px;
display:inline-block;
background:url(images/02.jpg);
}

效果：（这里的display，我用的是：inline-block）

我们还可以在content中，返回指定的属性；

content:attr()

如：

a:after{
content:attr(href);/*将返回元素指定的属性呀*/
}

效果：

接下来我们看一些实例滴呀：

实例一：

div:before{
content:open-quote;
}
div:after{
content:close-quote;
}

初级效果：

再加css

div:before {
content: open-quote;
font-size: 24px;
text-align: center;
line-height: 42px;
color: #fff;
background: #ddd;
float: left;
position: relative;
left: 0;
top: 5px;
height: 25px;
width: 25px;
border-radius: 25px;
}
div:after {
content: close-quote;
font-size: 24px;
text-align: center;
line-height: 42px;
color: #fff;
background: #ddd;
float: left;
position: relative;
bottom: 2px;
left: 210px;
height: 25px;
width: 25px;
border-radius: 25px;
}

效果：

更多的经常部分井参考：
http://blog.jobbole.com/49173/

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航