首页 > 代码库 > 伪元素、伪类基础理解

伪元素、伪类基础理解

2024-07-05 15:06:09   227人阅读

前几天同事问我css中单冒号和双冒号是什么意思，我也模糊得很，只有个笼统的概念就是：伪元素和伪类。一直以为，页面布局中很少使用到伪类，结果细细研究发现我们经常使用的hover就是一个最简单的伪类，顿时觉得自己太OUT了，紧跟着这两天都在看这些东西，其实伪类最简单的理解就是用于向某些选择器添加特殊的效果。

具体伪类、伪元素有哪些我就不一一列举，在w3c中列举的很清楚。我主要写写应用的实例。

1.来个简单的，咱们最常用到的向超链接添加不同的颜色：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
a:link {
    color: #FF0000
}
a:visited {
    color: #000
}
a:hover {
    color: #FF00FF
}
a:active {
    color: #0000FF
}
</style>
</head>
<body>
  <a href="#" target="_blank">点击试试</a>
</body>
</html>

2.稍稍来个复杂点的：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
a.color:link {
    color: #ff0000;
}
a.color:visited {
    color: #0000ff;
}
a.color:hover {
    color: #ffcc00;
}
a.size:link {
    color: #ff0000;
}
a.size:visited {
    color: #0000ff;
}
a.size:hover {
    font-size: 150%;
}
a.bgcolor:link {
    color: #ff0000;
}
a.bgcolor:visited {
    color: #0000ff;
}
a.bgcolor:hover {
    background: #66ff66;
}
a.fontfly:link {
    color: #ff0000;
}
a.fontfly:visited {
    color: #0000ff;
}
a.fontfly:hover {
    font-family: monospace;
}
a.decoration:link {
    color: #ff0000;
    text-decoration: none;
}
a.decoration:visited {
    color: #0000ff;
    text-decoration: none;
}
a.decoration:hover {
    text-decoration: underline;
}
</style>
</head>
<body>
    <p>将鼠标移到链接，看到他们改变布局。</p>
    <p><a class="color" href="javascript:void(0);" target="_blank">改变颜色</a></p>
    <p><a class="size" href="javascript:void(0);" target="_blank">改变字体大小</a></p>
    <p><a class="bgcolor" href="javascript:void(0);" target="_blank">改变背景颜色</a></p>
    <p><a class="fontfly" href="javascript:void(0);" target="_blank">改变字体</a></p>
    <p><a class="decoration" href="javascript:void(0);" target="_blank">给文字加上下划线</a></p>
</body>
</html>

3.下面来个稍微复杂点的：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>鼠标移动移动吧</title>
<style type="text/css">
.btn {
    display: block;
    text-align: center;
    width: 73px;
    height: 29px;
    line-height: 30px;
    text-align: center;
    text-decoration: none;
    border: 1px solid #5a8b56;
    background: #72a76e;
    color: #f2fff1;
    font-size: 14px;
    position: relative;
}
.btn:before {
    display: block;
    width: 72px;
    height: 28px;
    content: ‘‘;
    position: absolute;
    border-top: 1px solid #93bb90;
    border-left: 1px solid #93bb90;
}
a:hover.btn {
    background: #62905e;
    border-color: #5a8b56;
}
a:hover.btn:before {
    border-color: #527c4e;
}
</style>
</head>
<body>
   <a href="javascript:void(0);" class="btn">确 定</a>
</body>
</html>

 

 

应该结合JS能有更炫的效果，继续研究中。。。先说这么多，大家有可以参考的资料吗？


联系
我们