前端 CSS的选择器 伪类选择器

 

伪类选择器

常用的几种伪类选择器。

伪类选择器一般会用在超链接a标签中

 

没有访问的超链接a标签样式:

 

a:link {
  color: blue;
}

 

 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
    <style type="text/css">
        .box ul li.item1 a:link{
            color: red;
        }
    </style>
</head>
<body>
    <div class="box">
        <ul>
            <li class="item1">
                <a href="#">jack</a>
            </li>
            <li class="item2">
                <a href="#">ben</a>
            </li>
            <li class="item3">
                <a href="#">peter</a>
            </li>
        </ul>
    </div>
</body>
</html>

前端 CSS的选择器 伪类选择器

 

访问过的超链接a标签样式:

 

a:visited {
  color: gray;
}

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
    <style type="text/css">
        .box ul li.item1 a:visited{
            color: green;
        }
    </style>
</head>
<body>
    <div class="box">
        <ul>
            <li class="item1">
                <a href="#">jack</a>
            </li>
            <li class="item2">
                <a href="#">ben</a>
            </li>
            <li class="item3">
                <a href="#">peter</a>
            </li>
        </ul>
    </div>
</body>
</html>

前端 CSS的选择器 伪类选择器

 点击jack字体, jack字体变成绿色

前端 CSS的选择器 伪类选择器

 鼠标悬停时在元素上应用样式

a:hover {
  background-color: #eee; 
}

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
    <style type="text/css">
        .box ul li.item1 a:hover{
            color: green;
        }
    </style>
</head>
<body>
    <div class="box">
        <ul>
            <li class="item1">
                <a href="#">jack</a>
            </li>
            <li class="item2">
                <a href="#">ben</a>
            </li>
            <li class="item3">
                <a href="#">peter</a>
            </li>
        </ul>
    </div>
</body>
</html>

鼠标悬停时在 a标签jack上面 jack字体马上变成绿色

 

鼠标点住瞬间的样式:

a:active {
  color: green;
}

 

鼠标点住CSS样式改变,鼠标一放手就恢复原来的CSS样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
    <style type="text/css">
        .box ul li.item1 a:active{
            color: red;
        }
    </style>
</head>
<body>
    <div class="box">
        <ul>
            <li class="item1">
                <a href="#">jack</a>
            </li>
            <li class="item2">
                <a href="#">ben</a>
            </li>
            <li class="item3">
                <a href="#">peter</a>
            </li>
        </ul>
    </div>
</body>
</html>

 

上一篇:linux学习笔记


下一篇:Hive 高频考点讲解