CSS中选择器的使用方法简介

最新推荐文章于 2024-09-20 02:44:07 发布

pink_pantise

最新推荐文章于 2024-09-20 02:44:07 发布

阅读量601

点赞数 1

分类专栏： CSS样式文章标签： css html

本文链接：https://blog.youkuaiyun.com/pink_pantise/article/details/111143243

版权

本文介绍了CSS中各种选择器的使用，包括ID选择器、类选择器、标签选择器、全局选择器（及属性选择器）、组合选择器、继承选择器和伪类选择器。重点讨论了选择器的权重与优先级，以及它们在实际布局和交互设计中的应用。

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

1：ID选择器

ID选择器顾名思义，定义的是某一个特定和HTML元素，选择的是一个或多个标签定义ID属性值。

<html>
<head>
<title>css选择器</title>
<style>
	#idname{
    
		background-color:blue;
		width:30px;
		height:30px;
	}
</style>
</head>
<body>
	<div id="idname">使用ID选择器idname控制样式</div>
	<div id="idname">同样使用idname控制样式</div>
</body>
</html>

2：类选择器

类选择器选择的是标签中class值，当页面需要JS事件时通常用类选择器为单一或多个需要相同样式的标签进行定义。

<html>
<head>
<title>css选择器</title>
<style>
	.classname{
    
		background-color:blue;
		width:30px;
		height:30px;
	}
</style>
</head>
<body>
	<div class="classname"&

最低0.47元/天解锁文章