JavaWeb_CSS（6）_选择器_基本选择器

最新推荐文章于 2023-10-10 22:19:20 发布

魏宇轩

最新推荐文章于 2023-10-10 22:19:20 发布

阅读量575

点赞数 1

分类专栏： CSS（更新完）文章标签： JavaWeb CSS 基本选择器

本文链接：https://blog.csdn.net/qq_36260974/article/details/88387260

版权

CSS（更新完）专栏收录该内容

21 篇文章 3 订阅

订阅专栏

本系列博客汇总在这里：JavaWeb_CSS 汇总

一、CSS 的基本选择器

html 选择器（元素类型选择器），就是把 html 本身作为选择器。
class 选择器，就是把 html 标签的 class 属性值作为选择器。为了和 HTML 进行区分，加 . 作为前缀。
id 选择器，就是把 html 标签的 id 属性值作为选择器。为了和 HTML 进行区分，加 # 作为前缀。

二、基本选择器的优先级

元素类型选择器 < 类选择器 < ID选择器

三、示例

CSS 文件

@CHARSET "UTF-8";
p
{
	text-align: center;
	color: red;	
}

.xuan
{
	text-align: center;
	color: blue;	
}

#wei
{
	text-align: center;
	color: orange;	
}

HTML 文件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>www.weiyuxuan.cn</title>
		
		<!-- 引入两个一样的样式,使用后引入的样式 -->
		<link href="NewFile.css" type="text/css" rel="stylesheet">		
		
	</head>
	
	<body>
		<h1>选择器</h1>
		
			<hr>
				<h2> html 选择器</h2>
					<p> 你好        </p>	
					<p> 魏宇轩     </p>	
					<p> 学习 CSS </p>	
			<hr>
				<h2>class 选择器</h2>
					<p class="xuan"> 你好        </p>	
					<p class="xuan"> 魏宇轩     </p>	
					<p class="xuan"> 学习 CSS </p>	
			<hr>
				<h2>id 选择器</h2>
				<p id="wei"> hellowrold </p>	
	</body>
	
</html>