CSS 元素、id、class 选择器

最新推荐文章于 2023-04-13 20:17:06 发布

白菜执笔人

最新推荐文章于 2023-04-13 20:17:06 发布

阅读量330

点赞数

分类专栏： Web 前端基础

本文链接：https://blog.csdn.net/qq_43621629/article/details/102637589

版权

Web 前端基础专栏收录该内容

15 篇文章 0 订阅

订阅专栏

Web前端基础学习笔记

一、元素选择器

语法：语法：标签名{ 属性名: 属性值; }

元素选择器 也就是已经存在的标签的元素名称(比如已存在 p 标签)，
只要设置一次, 之后所有同类表情的格式都一样 (前提是没有设置其他选择器)，
如, 下面的所以 p 标签的内容都是 “首行缩进”。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>CSS 常用选择器</title>
	<style>
		h4{
			font-style: italic;									/* 斜体 */
		}
		p{
			text-indent: 32px;									/* 首行缩进 */
		}
		.p{
			font-weight: bold;									/* 粗体 */
		}
	</style>
</head>
<body>
	<h3>一、元素选择器</h3>
	<h4>
		这是斜体标题
	</h4>
	<p>
		元素选择器也就是已经存在的标签的元素名称(比如已存在 p 标签)<br>
		只要设置一次, 之后所有同类表情的格式都一样(前提是没有设置其他选择器)<br>
		如, 下面的所以 p 标签的内容都是 “首行缩进”
	</p>
	<p class="p">语法：标签名{ 属性名: 属性值; }</p>
	<br><hr><br>
</body>
</html>

二、id 选择器

语法：#id名{ 属性名: 属性值; }

当结构要体现单一样式时,就使用 id 选择器；在整个 html 文件当中 id 选择器 是唯一的（虽然再前端中不会报错）,主要是为了 后续使用 js 时不报错。

<head>
	<style>
		#p1,#p3{									/*( 属性相同可以用逗号隔开，如 #p1,#p3{} )*/
			color: red;
		}
	</style>
</head>

	<h3>二、id 选择器</h3>
	<p>
		当结构要体现单一样式时,就使用id选择器;在整个html文件当中id选择器是唯一的（虽然再前端中不会报错）,主要是为了后续使用js时不报错;
	</p>
	<p id="p1"> 这个字体设为红色 </p>
	<p id="p2"> 这个字体颜色为默认 </p>
	<p id="p3"> 这个字体也设为红色 </p>
	<p class="p"> 语法：#id名{ 属性名: 属性值; } </p>
	<br><hr><br>

三、class 选择器

语法：.class名{ 属性名: 属性值; }

在整个 html 文件当中如果某一类标签想要使用同一个样式时则使用 类选择器

<head>
	<style>
		.c1{ color: blue; }
		.c2{ color: pink; }
	</style>
</head>

	<h3>三、class 选择器</h3>
	<p>在整个html文件当中如果某一类标签想要使用同一个样式时则使用类选择器;</p>
	<p class="c1"> 这个字体设为蓝色 </p>
	<p class="c2"> 这个字体颜色为粉色 </p>
	<p class="c1"> 这个字体也设为蓝色 </p>
	<p class="p"> 语法：.class名{ 属性名: 属性值; } </p>
	<br>

白菜执笔人

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS 元素、id、class 选择器

Web前端基础学习笔记一、元素选择器语法：语法：标签名{ 属性名: 属性值; }元素选择器也就是已经存在的标签的元素名称(比如已存在 p 标签)，只要设置一次, 之后所有同类表情的格式都一样 (前提是没有设置其他选择器)，如, 下面的所以 p 标签的内容都是 “首行缩进”。<!DOCTYPE html><html lang="en"><head...
复制链接

扫一扫