前端笔记css（2）----css选择器

最新推荐文章于 2024-10-09 12:45:53 发布

一粒程序米

最新推荐文章于 2024-10-09 12:45:53 发布

阅读量157

点赞数

分类专栏：前端CSS

本文链接：https://blog.csdn.net/weixin_43449246/article/details/117524502

版权

前端CSS 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>css选择器</title>
		<style type="text/css">
			p,h1{color: blue;}   /* 标签选择器 */
			p.special{color: purple;}  /* 类选择器 */
			h2.special{color: coral;}  /* 类选择器 */
			.normal{color: aqua;}      /* 类选择器 */
			.other{color: purple;}    /* 类选择器 */
			#first{color: aquamarine;}  /* ID选择器 */ 
			.good,p,h2.special,#second{font-size: 30px;}  /* 群组选择器 */ 
			h2 em{color: cadetblue;} /* 后代选择器 */
			h3 em{color: lightseagreen;}/* 后代选择器 */
			h3 em.great{color: blue;}/* 后代选择器 结合类选择器*/
			h3 em#third{color: #FF7F50;}/* 后代选择器 结合ID选择器*/
			p b em{color: pink;}/* 后代选择器 */
			/* *{color: #55aaff;} */ /* 全局选择器  针对全局进行统一的样式选择 */
		</style>
		
	</head>
	<body>
		<p>一粒程序米</p>
		<h1 >一粒程序米</h1>
		<p class="special"><em>一粒程序米</em></p>
		<h2 class="special other">一粒程序米</h2> <!-- 一个标签内可以定义多个类选择器，类和类之间通过空格隔开 -->
		<h2 class="normal"><em>一粒程序米</em></h2>
		
		<h3 class="good"><em>一粒程序米</em></h3>
		<h3 id="first">一粒程序米</h3> <!-- 同一个HTML里id是唯一的 -->
		<h3 id="second">一粒程序米</h3>
		<h3 id="second"><em class="great">一粒程序米</em> yes</h3>
		<h3 id="second"><em >一粒程序米</em> yes</h3>
		<h3 id="second"><em id="third">一粒程序米</em> yes</h3>
		<p>
			<b><em>一粒程序米</em></b>ok
			<br>
			<em>一粒程序米</em>
		</p>
		<h5 >一粒程序米</h5>
	</body>
</html> 
 
 <!-- 选择器；类和id区分大小写 -->