CSS中选择器的概念、属性、以及应用。

最新推荐文章于 2025-07-01 09:31:29 发布

刘喆

最新推荐文章于 2025-07-01 09:31:29 发布

阅读量1.3k

点赞数

CC 4.0 BY-SA版权

分类专栏： web前端文章标签： web 选择器

本文链接：https://blog.youkuaiyun.com/xiaozhedeitzhilu/article/details/102828116

web前端专栏收录该内容

5 篇文章

订阅专栏

本文介绍了CSS中的选择器概念，包括基础选择器（元素选择器、类选择器、ID选择器和属性选择器）和其他选择器（后代选择器、子代选择器和相邻兄弟元素选择器）。此外，还讲解了伪类选择器的应用，帮助web设计师理解并熟练运用CSS选择器。

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

1.选择器概述

选择器是W3C在CSS工作草案中独立引入的一个概念。这些选择器基本上能够满足web设计师常规的设计需求。
下面我来为大家讲解几种常用的选择器。

2.基础选择器

（1）元素选择器（标签选择器）：

最常见的CSS选择器是元素选择器，换句话说，文档的元素就是最基本的选择器。标签选择器是指用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式。其基本语法格式如下：

<h3>标签名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
<h3>html{color:red:}</h3>
<h3>h1{color:yello:}</h3>

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>类选择器</title>
	<!-- 嵌入式引入发 -->
	<style type="text/css">
		.item1{
			height: 100px;
			width: 100px;
			background-color: red;
		}
		/* 作用于同一个标签的类选择器 */
		.item2{
			border: 2px solid blue;
		}
	</style>
</head>
<body>
	<!-- 同一个标签可以使用多个类选择器 -->
	<div class="item1 item2"></div>
    <!-- 类选择器可以复用 -->
    <div class="item1"></div>
</body>
</html>

（2）类选择器：

类选择器允许以一种独立于文档元素的方式来指定样式。类选择器可以单独使用，也可以与其他元素结合使用。在类选择器前面加个 .

在使用类选择器之前，需要修改具体的文档标签，以便类选择器正常工作。为了将类选择器与元素关联，必须为class属性指定一个适当的值。案例如下

<h3>< p class="red">我是红色< /p></h3>

（3）ID选择器：

在某些方面,ID选择器类似于类选择器，不过也有些重要差别。W3C标准规定，在同一个页面内，不允许有相同名字的id对象出现，但是允许相同名字的class。

类选择器（class）好比人的名字，是可以多次重复使用的，比如张伟王伟李伟李娜
id选择器好比人的身份证号码，全中国是唯一的，不得重复。只能使用一次。

第一个区别是ID选择器前面有一个“#”号，也称为棋盘号或井号。规则如下：

<!DOCTYPE html>
< html lang="en">
< head>
	< meta charset="UTF-8">
	< title>id选择器</title>
	< style type="text/css">
		#css1{
			height: 200px;
			width: 200px;
			background-color: blue;
		}
	< /style>
< /head>
< body>
	< div id="css1">< /div>
< /body>
< /html>

（4）属性选择器：

在html中，通过各式各样的属性，可以给元素增加很多的附加信息。例如，通过 height 属性，可以指定 div 元素的宽度：通过id属性，可以将不同的div元素进行区分，并通过js来控制这个div元素的内容和状态。

< div id="mr1">编程图书< /div>
<style type="text/css">
#mr1{background:red}
</style>

3.其他选择器

（1）后代选择器

后代选择器又称为包含选择器，它可以作为某元素后代的元素。我们可以通过定义后代选择器来创建一些规则，这些规则在某些文档结构中起作用，而在另一些文档结构中不起作用。

eg：如果只希望将h1元素后代em元素的文本变成红色，而不改变其他em元素里文本的颜色，则可以这样写：

h1 em{color:red;}

<h1><em>我变红色</em></h1>
<p><em>我不变色</em></p>

（2）子代选择器

如果你不希望选择任意的后代元素，而是希望缩小范围，只选择某个元素的子元素，那么请使用子代选择器。

eg：只想选择h1元素的子元素strong，则可以这样写：

h1>strong{color:red;}
这样规则会把第一个h1下面的strong变成红色，而第二个h1中的strong不受影响。
<h1><strong>我变红色</strong></h1>
<h1><em><strong>我不变色</strong></em></h1>

（3）相邻兄弟元素选择器

相邻兄弟元素选择器可选择紧接在零一元素后的元素，且二者有相同的父元素。相邻兄弟元素选择器使用"+"作为结合符。 eg：要将紧接在h1元素后出现的段落变为黄色，则可以这样写：

h1+p{color:yellow;}

4.伪类选择器

（1）伪类选择器

伪类选择器分为：（链接伪类选择器、结构伪类选择器、目标伪类选择器）链接伪类选择器：顾名思义就是用于链接的伪类选择器。a的伪类标签有:a:link、a:visited、a:hover、a:active，a:link表示的是未访问的链接，a:visited表示已访问的链接，a:hover表示鼠标移动到链接上，a:active表示的是选定的链接（当我们点击别松开鼠标，显示的状态）

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <style>
        a:link {   
        	font-size: 16px;
        	color: gray;
        	font-weight: 700;
        }
        a:visited {  
        	font-size: 16px;
        	color: orange;
        	font-weight: 700;
        }
        a:hover { 
        	font-size: 16px;
        	color: red;
        	font-weight: 700;
        }
        a:active {  
			font-size: 16px;
        	color: green;
        	font-weight: 700;
        }
        </style>
    </head>
    <body>
      <div>  
	      <a href="#" >房间里面是一具已经腐烂的尸体，腐臭让人难以接受。</a>   
	      <a href="#" >办案的刑警正在仔细地收集者证据。</a>   
      </div>
    </body>
</html>

在这里插入图片描述