CSS入门、基本选择器和组合选择器

最新推荐文章于 2024-07-19 18:46:52 发布

波澜不惊！

最新推荐文章于 2024-07-19 18:46:52 发布

阅读量266

点赞数 1

分类专栏：前端入门文章标签： css css3 前端

本文链接：https://blog.csdn.net/m0_51258512/article/details/122786565

版权

前端入门专栏收录该内容

9 篇文章 1 订阅

订阅专栏

CSS的基本使用
- 定义
- 注释
- 样式
  - 行内样式
  - 内部样式
  - 外部样式
- 优先级

<head>
		<meta charset="utf-8">
		<title>CSS的基本使用</title>
		<style type="text/css">
			/* 设置所有的h2标签为棕色*/
			h2{
				color: brown;
			}
		</style>
		<link rel="stylesheet" type="text/css" href="css/style.css">
	</head>
	<body>
		<!--  
			CSS的基本使用
				一、CSS的定义
					选择器名{
						属性名:属性值;
						属性名:属性值;
						属性名:属性值;
						...
					}
					注意点：
						1.声明需要使用{}括起来，每个声明以分号;结尾
						2.一行建议一个声明
						3.如果样式的属性值由多个单词组成，则用引号引起来
				二、CSS的注释
						/* 注释内容 */
				三、CSS的三种使用方式
					1.行内样式
						直接写在标签上的样式，在标签上通过style属性定义的样式
					2.内部样式
						定义在style标签中的样式，style标签一般设置在head标签中
					3.外部样式
						定义在外部的css文件中，通过link标签引入
						<head>
							<link rel="stylesheet" type="text/css" href="css文件的路径">
						</head>	
					注：多重样式时，越精准越优先，行内>内部>外部

		-->
		<h2>Hello World你好 世界</h2>
		<h2 style="color: aqua;font-family: 楷体;">Hello World你好 世界</h2>
	</body>

CSS的基本选择器
- 通用选择器
- 元素选择器
- id选择器
- 类选择器
- 分组选择器

<head>
		<meta charset="utf-8">
		<title>基本选择器</title>
		<style type="text/css">
			/* 通用选择器 */
			*{
				color: #aa00ff;
			}
			/* 元素选择器 */
			div{
				font-size: 30px;
			}
			/* id选择器 */
			#p1{
				background-color: coral;
			}
			/* 类选择器 */
			.cls1{
				font-family: 楷体;
			}
			/* 分组选择器 */
			#p1,.cls1{
				text-decoration: line-through;
			}
		</style>
	</head>
	<body>
		<!--  
			CSS基本选择器
				1.通用选择器 *
					*{
						属性名:属性值;
						...
					}
				2.元素选择器
					元素名/标签名{
						属性名:属性值;
						...
					}
				3.ID选择器 #
					#id属性值{
						属性名:属性值;
						...
					}
				4.类选择器 .
					.class属性值{
						属性名:属性值;
						...
					}
				5.分组选择器
					选择器1,选择器2,选择器3,...{
						属性名:属性值;
						...
					}
				注意:
					CSS样式的优先级,是根据选择器的精确度/权重来决定的
					元素选择器: 1
					类选择器:   10
					id选择器:   100
					内联样式:   1000
		-->
		<div>div1</div>
		<div>div2</div>
		<p id="p1">段落</p>
		<span class="cls1">这是一个span</span>
		<br>
		<font>这是一个font</font>
		
	</body>

CSS的组合选择器
- 后代选择器
- 子代选择器
- 相邻兄弟选择器
- 普通兄弟选择器

<head>
		<meta charset="utf-8">
		<title>CSS组合选择器</title>
		<style type="text/css">
			/* 后代选择器 */
			.food li{
				border: #A52A2A solid 1px ;
			}
			
			/* 子代选择器 */
			.food2 > li{
				border: #555500 dotted 1px ;
			}
			
			/* 相邻兄弟选择器 */
			#div2 + div{
				background-color: #00ff00;
			}
			
			/* 普通兄弟选择器 */
			#HW ~ div{
				background-color: #00ff00;
			}
		</style>
	</head>
	<body>
		<!-- 
			组合选择器
				后代选择器
					选择指定元素的所有指定后代元素，以空格隔开
					选择器 指定元素{
						属性名:属性值;
						...
					}
				子代选择器
					选择指定元素的第一代子元素，以加号+隔开
					选择器 > 指定元素{
						属性名:属性值;
						...
					}
				相邻兄弟选择器
					选择指定元素的下一个指定元素(只会找一个)，两者有相同的父元素，以加号+隔开
					选择器 + 指定元素{
						属性名:属性值;
						...
					}
				普通兄弟选择器
					选择指定元素后面的所有指定元素，两者有相同的父元素，以波浪号~隔开
					选择器 ~ 指定元素{
						属性名:属性值;
						...
					}
		-->
		
		<!-- 获取class属性值是food的元素的所有li列表项 -->
		<ul class="food">
			<li>水果
				<ul>
					<li>香蕉</li>
					<li>苹果</li>
					<li>梨</li>
				</ul>
			</li>
			<li>
				<ul>
					<li>白菜</li>
					<li>油菜</li>
					<li>卷心菜</li>
				</ul>
			</li>
		</ul>
		
		<hr>
		<ul class="food2">
			<li>水果
				<ul>
					<li>香蕉</li>
					<li>苹果</li>
					<li>梨</li>
				</ul>
			</li>
			<li>
				<ul>
					<li>白菜</li>
					<li>油菜</li>
					<li>卷心菜</li>
				</ul>
			</li>
		</ul>
		
		<hr>
		<div>相邻兄弟选择器1</div>
		<div id="div2">相邻兄弟选择器2</div>
		<!-- <p>如果相邻有其他非指定元素元素，比如这个p标签，div相邻兄弟选择器就找不到</p> -->
		<div>被div2给绿了</div>
		<div>相邻兄弟选择器4</div>
		
		<hr>
		<div>兄弟1</div>
		<div id="HW">兄弟2</div>
		<div>底下的兄弟都被兄弟2给绿了</div>
		<div>兄弟3</div>
		<div>兄弟4</div>
		<div>兄弟5</div>
	</body>

波澜不惊！

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS入门、基本选择器和组合选择器

CSS的基本使用定义注释样式行内样式内部样式外部样式优先级<head> <meta charset="utf-8"> <title>CSS的基本使用</title> <style type="text/css"> /* 设置所有的h2标签为棕色*/ h2{ color: brown; } </style> <link rel="stylesheet" t.
复制链接

扫一扫