CSS基础知识---三种选择器

最新推荐文章于 2022-05-21 16:36:23 发布

知有丶

最新推荐文章于 2022-05-21 16:36:23 发布

阅读量253

点赞数 1

分类专栏： HTML---CSS 文章标签： html css 学习

本文链接：https://blog.csdn.net/weixin_43854673/article/details/94009054

版权

HTML---CSS 专栏收录该内容

5 篇文章 1 订阅

订阅专栏

CSS基础知识---三种选择器

选择器

标签选择器
id选择器
class选择器

标签选择器

选择器优先级：id>class>标签

/*标签选择器*/
			h1{
				color:#000000;
				font-size:50px;
			}
			
			p{
				text-align: center;
				color: salmon;
			}
			
			body{
				margin: 0;
				padding: 0;
			}

id选择器

/*ID选择器*/
			#myP{
				color: brown;
			}

class选择器

/*Class选择器*/
			.myClass{
				font-size: 20px;
			}

全部代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>My World</title>
		<style>
			/*选择器优先级id>class>标签*/
			/*标签选择器*/
			h1{
				color:#000000;
				font-size:50px;
			}
			
			p{
				text-align: center;
				color: salmon;
			}
			
			body{
				margin: 0;
				padding: 0;
			}
			
			/*ID选择器*/
			#myP{
				color: brown;
			}
			
			/*Class选择器*/
			.myClass{
				font-size: 20px;
			}
		</style>
	</head>
	<body>
		<img src="img/u=192422651,1443365817&fm=26&gp=0.jpg" width="10%" alt="你这是啥网" />
		<h1 class="myClass">欢迎来到德莱联盟</h1>
		<p class="myClass">
			豹女，狮子狗
			提莫，凯尔
			德莱厄斯，德莱文
			盖伦，艾希
		</p>
		
		<p id="myP">
			豹女，狮子狗
			提莫，凯尔
			德莱厄斯，德莱文
			盖伦，艾希
		</p>
	</body>
</html>

效果：
在这里插入图片描述

知有丶

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS基础知识---三种选择器

CSS基础知识选择器标签选择器id选择器class选择器全部代码选择器标签选择器id选择器class选择器标签选择器选择器优先级：id>class>标签/*标签选择器*/ h1{ color:#000000; font-size:50px; } p{ text-align: center; color: sal...
复制链接

扫一扫

专栏目录