HTML——选择器

最新推荐文章于 2023-07-10 22:53:16 发布

小刘小刘可爱一流

最新推荐文章于 2023-07-10 22:53:16 发布

阅读量278

点赞数

文章标签： html

本文链接：https://blog.csdn.net/qq_44687512/article/details/107354544

版权

什么是选择器？
浏览器通过选择器为满足条件的HTML元素添加CSS样式

1、id选择器：以id标签属性值为选择器。匹配：标签的id与id选择器相同的标签

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div id="zzu">郑州</div>
        <style>
        	#zzu{
        		text-align: center;
        		font-family: "微软雅黑";
        	}
	</body>
</html>

2、class选择器：以class标签属性值为选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<b class="u">大学</b>
		
        <style>
        	.u{
        		color: red;
        	}
        </style>
	</body>
</html>

3、标签选择器：以标签名为选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<b class="u">大学</b>
		
        <style>
        	b{
        		font-size: 72px;
        	}
	</body>
</html>

4、后代选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
	   <div id="zzu">郑州</div>
	   
	   #zzu{
        		text-align: center;
        		font-family: "微软雅黑";
        	}
        	
       html body #zzu{
        		background-color: azure;
        	}
	</body>
</html>

5、分组选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<span class="u">你好</span>
		<span class="u">再见</span>
		<b class="u">大学</b>
		<i id="c">zzxtit</i>
		
        <style>
        	#c,.u{
        		color: white;
        	}
	</body>
</html>

6、通配符选择器:匹配页面里的所有标签

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<span class="u">你好</span>
		<span class="u">再见</span>
		<div id="zzu">郑州</div>
		<b class="u">大学</b>
		<i id="c">zzxtit</i>
		
        <style>
        	*{
        		margin: 0px;
        		padding: 0px;
        	}
        </style>
	</body>
</html>