大一下css第二次课内容：选择器_属性选择器鼠标点击-优快云博客

本文链接：https://blog.youkuaiyun.com/Emma_Black/article/details/129860437

本文详细介绍了CSS中的基本选择器类型，包括标签选择器、ID选择器、类选择器和通用选择器，并探讨了它们的优先级。此外，还涵盖了包含选择器，如子代选择器、后代选择器和分组选择器。最后，文章讨论了属性选择器和伪类选择器，如:link、:visited、:hover和:active，为CSS样式设计提供了全面的理解。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

避雷：为了写的时候高兴一些，在一些地方使用了我推的名字（起码对我有用，一下子就可以理解了）。如果有不喜欢的请左击返回，谢谢。

一个及其潦草的目录：

一、基本选择器类型
1.1标签选择器
1.2ID选择器
1.3类选择器
1.4通用选择器
1.5关于四种基本选择器的优先级
二、包含选择器类型
2.1子代选择器
2.2后代选择器
2.3分组选择器
三、属性选择器
四、伪类选择器及其四种样式
4.1link（点击前）
4.2visited（点击后）
4.3hover（光标悬浮时）
4.4active（鼠标点击不松手时）

一基本选择器类型

在css中基本选择器有：标签选择器（根据标签的名称获取）、ID选择器（获取的是ID属性）、类选择器（class属性）、通用选择器（通配符）。下面将分门别类的对其进行说明。

1.1标签选择器

标签选择器是根据标签的名称获取的一种选择器。
其具体使用方法如下，

<!DOCTYPE html>
<html>
<head>
<title>选择器</title>
<style type="text/css">
div{
     
color: orange;
}
</style>
</head>
<body>

<div >
这是第一个div
</div>
</body>
</html>

在这里插入图片描述

1.2ID选择器

ID选择器是一种获取的是ID属性的选择器，会根据id名进行获取。
其具体使用方法如下，

<!DOCTYPE html>
<html>
<head>
<title>选择器</title>
<style type="text/css">
   #mysta{
     
                color: orange;
              }
</style>
</head>
<body>

<div id="mysta" >这是第一个div</div>
</body>
</html>

在这里插入图片描述

1.3类选择器

类选择器是一种获取标签中class属性名称的选择器。
其具体使用方法如下，

<!DOCTYPE html>
<html>
<head>
<title>选择器</title>
<style type="text/css">
   .ike{
     
                color: rgb(103, 181, 220);
              }
</style>
</head>
<body>

<div id="mysta" class="ike" >这是第三个div</div>
</body>
</html>

在这里插入图片描述

1.4通用选择器

顾名思义，在选择通用选择器后，呈现的所有后内容都将会以其通用选择器的模板来显示（遇见其他基本选择器时除外）。
其使用方法如下，

<!DOCTYPE html>
<html>
<head>
<title>选择器</title>
<style type="text/css">
   *{
     
                color: rgb(250, 3, 3);
              }
</style>
</head>
<body>

<div id="mysta" class="ike" >这是第四个div</div>
</body>
</html>

在这里插入图片描述

1.5关于四种基本选择器的优先级

我们将通过实践从四个基本选择器中比较出优先级。
首先是将四种基本选择器都放在一起，

<!DOCTYPE html>
<html>
<head>
<title>选择器</title>
<style type="text/css">
   div{
     
                color: rgb(133, 21, 108);