CSS选择器（上）|通用、ID、类、元素

最新推荐文章于 2024-11-04 07:45:03 发布

喵小胡

最新推荐文章于 2024-11-04 07:45:03 发布

阅读量170

点赞数

分类专栏：网页开发与设计课堂笔记文章标签： css html

本文链接：https://blog.csdn.net/weixin_53937982/article/details/116148789

版权

网页开发与设计课堂笔记专栏收录该内容

4 篇文章 0 订阅

订阅专栏

本文详细介绍了CSS中的四种基本选择器：通用选择器、元素选择器、ID选择器和类选择器。通用选择器通过*匹配所有元素，元素选择器直接使用元素名进行选择，ID选择器利用#id选取唯一元素，类选择器则使用.class选取具有特定类的元素。示例代码展示了每种选择器的用法及其在HTML页面上的效果。

摘要由CSDN通过智能技术生成

CSS选择器（上）|通用、ID、类、元素

通用选择器
“”号选择器是通用选择器，功能是匹配**所有 html 元素的选择器包括“html”和“body”标签***。
（若不存在所有样式都要配置，尽量不用）

下面是该选择器的呈现效果：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>通用选择器</title>
	<style>
	* {
    color: #E91925;
}
    </style>
</head>

<body>
	<p>今天是2021年4月24日，星期三</p>
	<b>多云</b><br>
	<span>适合穿薄外套</span>
	<br><br><br>
	<table border="1">
		<tr>
		<td>hello</td>
		<td>hello</td>
		<td>hello</td>
	    </tr>
	</table>
</body>
</html>

元素选择器
直接使用元素名称作为选择器名即可，如p，div，table等等。

下面是该选择器的呈现效果：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>元素选择器</title>
	<style>
		p{ color: coral;}
		table{background: #ABD7EF;}
	</style>
</head>

<body>
	<p>今天是2021年4月24日，星期三</p>
	<b>多云</b>
	
	<table border="1">
		<tr>
		<td>hello</td>
		<td>hello</td>
		<td>hello</td>
	    </tr>
	</table>
</body>
</html>

ID选择器
通过对元素设置全局属性 id，然后使用#id 值来选择页面唯一元素。

下面是该选择器的呈现效果：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>ID选择器</title>
	<style>
	#myid{ font-size:22px; color: aqua;}
	</style>
	
</head>

<body>
	<p id="myid">今天是2021年4月24日，星期三</p>
</body>
</html>

类选择器
通过对元素设置全局属性 class，然后使用.class 值选择页面一个或多个元素。

下面是该选择器的呈现效果：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>类选择器</title>
	<style>
		.myclass{font-size: 30px; color: chartreuse;}
	</style>
</head>

<body>
	<p class="myclass">今天是2021年4月24日，星期三</p>
	<br>
	<p>今天是2021年4月24日，星期三</p>
	<br>
	<p class="myclass">HELLO MY WORLD!</p>
</body>
</html>