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

CSS 伪类学习

2014-06-13 11:45 197 查看

(1).链接伪类使用

a:link {color:pink;} -----未点击的链接

a:visited{color:skyblue;}-----已经点击的链接

a:hover{color:red;}-----鼠标移上去的颜色变化

a:active{color:black;}----选定的链接的颜色变化

Tips:

在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的

在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。

伪类名称对大小写不敏感。

(2):first-child伪类使用：像元素的第一个子类添加其效果

li:first-child{font-wight:bold;}

(3)table中的伪类使用（:nth-of-type/:nth-child/:nth-last-child）

:nth-of-type可以通过参数来选择表格的奇数行或偶数行，odd代表奇数行，even代表偶数行。

比如:

table tr:nth-of-type(odd){background-color:pink;}------表格的偶数行为粉红色

table tr:nth-of-typ(even){background-color:red;}-------表格的基数行为红色

table tr:nth-child(n+i){color:pink;}----从表格的第i行下面的字体为粉红色

(4):before伪类使用

p:before{content:url(/work/test.jpg)} ----在P标签前增加一个图片

(5):after伪类的使用

p:after{content:url(/work/test01.jpg)}------在P标签的后面增加一个图片

做了个小小的实验，css初学者，献丑下；

<!DOCTYPE html>
<html>
<head>
<title>test</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<style>
td{text-align:center; width:360px; background-color:lightblue; border:1px solid blue;}
h3{background-color:pink;}
ul{background-color:#DDD;}
.mod{ display:inline-block; text-align:left; min-width:9em;}
.mod li:first-child {
color: red;
font: 50px;
}

#box{
margin-top: 0px;
height: 50px;
width: 100px;
background-color: skyblue;
border-radius: 20%;
}
#box:active{
background-color: red;
margin-top:20px;     //往下跳20px
}
.yuan{
height: 100px;
width: 100px;
border-radius: 50%;
background-color: pink;
text-align: center;
display: inline-block;
position: relative;
}
.all .yuan:hover::before{
content: "";
color: #5cb34e;
position: absolute;
left: 30px;
width: 110px;
height: 110px;
border-radius: 50%;
border: 1px dashed green;
top:20px;
}
.all .yuan:hover{    //鼠标移上去div的颜色变成红色
background-color:red;
}
</style>
</head>
<body>

<table>
<tbody></tbody>
<tr>
<td>
<div class="mod">
<h3 class="hd">工作</h3>
<ul class="bd">
<li>找bug</li>
<li>测试</li>
<li>coding</li>
</ul>
</div>
</td>

<td>
<div class="mod">
<h3 class="hd">学习</h3>
<ul class="bd">
<li>css </li>
<li>js</li>
<li>java</li>
</ul>
</div>
</td>

<td>
<div class="mod">
<h3 class="hd">玩play</h3>
<ul class="bd">
<li>玩游戏</li>
<li>看电视</li>
<li>去青岛</li>
</ul>
</div>
</td>
</tr>
</table>

<div id="box"></div>
<div class="all">
<div class="yuan">shiping</div>
<div class="yuan">shiping01</div>
<div class="yuan">shiping02</div>
<div class="yuan">shiping03</div>
</div>
</body>
</html>

View Code

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

标签：

相关文章推荐

新的分享

章节导航

CSS 伪类 学习

CSS 伪类学习