CSS选择器分类说明_css元素鼠标按住时字体颜色-CSDN博客

本文链接：https://blog.csdn.net/m0_46549558/article/details/124400346

选择器主要分为以下三种形式：

1）标签选择器

2）类选择器

3）ID选择器

注意：

1）CSS属性和值，对大小写是不敏感的。

2）为了规范，规定所有属性为小写字符。

3）在使用HTML的类和 ID选择器时，大小写是敏感的。

CSS内部样式表

内部样式表可以由它们组成：标签选择器+属性+值，分别对应图中所示的body ;background-color ;yellow。

标签选择器

标签选择器：以HTML的标签名作为选择器名的样式选择器。一旦使用了标签选择器,对应HTML标签的显示样式就会按照设置的样式进行显示。图片中展现的是标签选择器，对应的body标签背景颜色设置为黄色！

接下来让我们来了解类选择器

类选择器

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>类选择器导入</title>
    <style type="text/css">
        .o_common{
            /*观察这里代码*/
            border:blue 2px solid;
        }
        .no_common{
            /*观察这里代码*/
            border: solid 2px red;
            height:50px;
            margin:2px;
        }
    </style>
</head>
<body>
    <div class ="o_common" style="width:500px; height:60px; margin-bottom:5px ;">
        <div class ="no_common" style="width:100px;float:left ">LOGO区</div>
        <div class ="no_common" style="width:200px;float:right ">登陆区</div>
    </div>
    <div class ="o_common" style="width:500px; height:40px; margin-bottom:5px ;">菜单区</div>
</body>
</html>

类选择器：简单地说，将同一类的标签，定义一个相同的class，再根据类名进行css设置。

语法：

1）body中先给对应的标签加上 class属性：

2）style标签中用"."来定义：

第一张图片中的 .o_common{css样式} 就是一个类选择器，在对应标签的class属性中，将类名定义成o_common。那么这个标签就会受到类选择器属性约束。

ID选择器

ID选择器：简单的来说就是通过对标签绑定ID，来对标签进行控制。

语法：

1）body中先给对应的标签加上 ID属性：

2）style标签中用"#"来定义：

图片中的 #o_head {css样式} 就是一个ID选择器，在对应标签的ID属性中，将类名定义成o_head。那么这个标签就会受到对应属性的约束。

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>ID选择器</title>
    <style type="text/css">
        div{
            border:blue 2px solid;
            width:500px;
            margin-bottom:5px ; 
            height:40px;
        }
        #o_head{
            /*code*/
            border-color: red;
            height: 60px; 
             
        }
    </style>
</head>
<body>
    <div id="o_head">标题区</div>
    <div>菜单区</div>
</body>
</html>

CSS伪类

在HTML中除了使用选择器对页面元素进行CSS控制以外，还存在另外一种方式—CSS伪类。CSS 伪类用于向某些标签添加特殊的效果。多数情况下用于对链接添加效果。

那么链接会在什么情况下展现不同效果呢？以及对应的效果是什么？下表是我们总结的链接在不同情况下展现的效果列表。

情况	链接效果（自定义）
未被鼠标点击的样式	字体颜色为白色
被鼠标点击过的样式	字体颜色为蓝色
鼠标悬停在链接之上且不点击	背景颜色为白色且字体为黑色
鼠标按住链接，且不放开	背景颜色为黑色且字体为白色

<!DOCTYPE html>

<html>

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title>测试为伪类PageC</title>

    <style type="text/css">

    a{

        /*祛除连接下划线*/

        text-decoration: none;

        background-color: #2EA6FF;

        margin: 0px;

        padding: 5px;

        /*设置字体大小*/

        font-size:20px;

    }   a:link{

        /*未点击之前为白色*/

        color: white;

    }

    a:visited{

        /*浏览过的链接为蓝色*/

        color: blue;

    }

    a:hover{

        /*鼠标置于链接上时 字体颜色为黑色，背景为白色*/

        background-color: white;

        color: black;

    }

    a:active{

        /*鼠标按住链接且不放开时 字体颜色为白色，背景为黑色*/

        background-color: black;

        color: white;

    }

    </style>

</head>

<body>

    <a href="#1">首页</a><a href="#2">输入法</a><a href="#3">语点</a><a href="#4">视频</a><a href="#5">音乐</a>

</body>

</html>

链接中运用伪类的情况可以概括以下四种：

未访问的（link），已访问的（visited），活动的（active），鼠标悬停的（hover）。

未访问的：未点击的链接状态。

已访问的：以点击过的链接状态。

这里介绍的是未访问的和已访问的。