CSS基础选择器总结

最新推荐文章于 2024-07-08 11:32:20 发布

透明的胡萝卜_robots

最新推荐文章于 2024-07-08 11:32:20 发布

阅读量294

点赞数 1

分类专栏：前端 css 文章标签： css 前端 css3

本文链接：https://blog.csdn.net/gou1791241251/article/details/126459200

版权

前端同时被 2 个专栏收录

14 篇文章 0 订阅

订阅专栏

css

12 篇文章 0 订阅

订阅专栏

CSS选择器

基础选择器

基础选择器

标签选择器

概念：标签选择器是指用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式。
语法：

标签名{属性1：属性值1；属性2：属性值2；}
直接选择所有h1标签设置字体颜色为红色：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>标签选择器</title>
	<style type="text/css">
		h1{
			color: red;
		}
	</style>
</head>
<body>
	<h1>我是胡萝卜</h1>
</body>
</html>

类选择器

类选择器使用"."（英文点号）进行标识，后面紧跟类名
语法：

类名选择器

.类名{
	属性1:属性值1;
	属性2:属性值2;
}

标签

<p class="类名"></p>

注意
类选择器使用"."（英文点号）进行标识，后面紧跟类名
长名称或词组可以使用中横线来为选择器命名
不要纯数字、中文等命名，尽量使用英文字母来表示。

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>标签选择器</title>
	<style type="text/css">
		.title1{
			color: red;
		}
	</style>
</head>
<body>
	<h1 class="title1">我是胡萝卜</h1>
</body>
</html>

类选择器特殊用法-多类名

一个标签可以拥有多个类名

class=“类名1 类名2”

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>google案例1多类名</title>
	<style type="text/css">
		.font100{
			font-size: 100px;
		}
		.blue{
			color: blue;
		}
		.red{
			color: red;
		}
		.orange{
			color: orange;
		}
		.green{
			color: green;
		}
	</style>
</head>
<body>
	<span class="font100 blue">G</span>
	<span class="font100 red">o</span>
	<span class="font100 orange">o</span>
	<span class="font100 blue">g</span>
	<span class="font100 green">l</span>
	<span class="font100 red">e</span>
</body>
</html>

id选择器

id选择器使用#进行标识，后面紧跟ID名

其基本语法格式如下

#id名{属性1:属性值1;属性2:属性值2;}

<p id="id名"></p>

元素的id是唯一的，只能对应于文档中某一个具体的元素
用法基本和类选择器相同

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>ID选择器</title>
	<style type="text/css">
		#biaoti{
			color: red;
		}
	</style>
</head>
<body>
	<h1 id="biaoti">我是胡萝卜</h1>
</body>
</html>

通配符选择器

概念

通配符选择器用*号表示，*就是选择所有的标签，它是所有选择器中作用范围最广的，能匹配页面中所有元素。

基本语法格式

{属性1:属性值1;属性2:属性值2;}

例如以下代码，使用通配符选择器定义CSS样式，清除所有HTML标签的默认边距

*{
	margin:0;
	padding:0;
}

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>通配符选择器</title>
	<style type="text/css">
		* {
			color: red;
		}
	</style>
</head>
<body>
	<div>胡萝卜</div>
	<span>我是胡萝卜</span>
	<p>透明的胡萝卜</p>
</body>
</html>

注意：会匹配页面所有的元素，降低页面响应速度，不建议随便使用

在这里插入图片描述