第三次网页前端培训笔记（CSS选择器）

B站视频网址：（本次仅涉及P8-P10）​​​​​​【优极限】 HTML+CSS+JavaScript+jQuery前端必学教程，小白教学，前端基础全套完成版_哔哩哔哩_bilibili

菜鸟教程网址：HTML 教程 | 菜鸟教程 (runoob.com)

一、CSS定义

			一、CSS定义
				选择器名{
					属性名：属性值；
					属性名：属性值；
					...
				}
				注意点：
					1.	声明需要用{}括起来，每个声明以；结尾
					2.一行建议一个声明
					3.如果样式的属性值由多个单词组成，则用""引起来

二、注释

三、CSS的三种使用方式

			二、CSS注释
				/*注释内容*/
			三、CSS的三种使用方式：
				1、行内样式
					直接写在标签上的样式，在标签上通过style属性定义的样式
				2、内部样式
					定义再style标签中的样式，style标签一般设置在head标签中
				3、外部样式
					定义在外部的CSS文件中，通过link标签引入
					<link rel="stylesheet" type="text/css" href="css文件的路径" />
				注：当有多重样式时，越精准越优先（就近原则）

 1.行内样式

<h2 style="color:red; font-family: 楷体;">Hello World</h2>

  2.内部样式

<style>
		/*设置所有的h2标签的文本为红色*/
		h2{
			color: red;
			font-family: "arial black";
		}
	</style>

        <h2>Hello World</h2>
		<h2 style="color:red; font-family: 楷体;">Hello World</h2>
		<h2>Hello World</h2>

3、外部样式

<link rel="stylesheet" type="text/css" href="css/style.css" />

h2{
	font-size: 20px;
}

运行效果 

四、CSS基本选择器

			四、CSS基本选择器
				1.通用选择器*
					*{
						属性名：属性值；
						...
					}
				2.元素选择器
					元素名/标签名{
						属性名：属性值；
						...
					}
				3.ID选择器
					#id属性值{
						属性名：属性值；
						...
					}
				4.类选择器
					.class属性值{
						属性名：属性值；
						...
					}
				5.分组选择器
					选择器1，选择器2，选择器3...{
						属性名：属性值；
					}
				CSS样式的优先级，是根据选择器的精确度/权重来决定的，常见的权重如下，权重大，优先级越高
					元素选择器：1
					类选择器：10
					id选择器：100
					内联样式：1000

	<style type="text/css">
		/*通用选择器*/
		*{
			color: #00FFFF;
		}
		/*元素选择器*/
		div{
			font-size: 30px;
		}
		/*id选择器*/
		#p1{
			background-color: #FAEBD7;
			color: #DA70D6;
		}
		/*类选择器*/
		.cls1{
			font-family: 楷体;
		}
		/*分组选择器*/
		#p1,.cls1,font{
			text-decoration: line-through;
		}
	</style>

<div class="cls1">这是一个div1</div>
		<div>这是一个div2</div>
		<p id="p1">这是一个p</p>
		<span class="cls1">这是一个span</span>
		<br>
		<font>这是一个font</font>

运行效果

 五、组合选择器

			五、组合选择器
				后代选择器
					选择指定元素的所有指定后代元素，以空格隔开
					选择器 指定元素{
						属性名：属性值；
						...
					}
				子代选择器
					选择指定元素的第一代子元素，以加号>隔开
					选择器 > 指定元素 {
						属性名：属性值；
						...
					}
				相邻兄弟选择器
					选择指定元素的下一个指定元素，（只会找一个），两者有相同的父元素，以加号+隔开
					选择器 + 指定元素 {
						属性名：属性值；
						...
					}
				普通兄弟选择器
					选择指定元素后面的指定元素，两者有相同的父元素，以波浪号~隔开
					选择器 ~ 指定元素 {
					属性名：属性值；
					...
				}
		-->

	<style type="text/css">
		/*后代选择器*/
		.food li{
			border: #9ACD32 solid 1px;
		}
		#food2 > li {
			border: palegoldenrod dotted 1px;
		}
		#mydiv + div{
			background-color: #808000;
		}
		/*普通兄弟选择器*/
		#mydiv2 ~ div{
			background-color: #FA8072;
		}
	</style>

		<!--获取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>
		<br>
		<ul id="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="mydiv">相邻兄弟选择器2</div>
		<div>相邻兄弟选择器3</div>
		<div>相邻兄弟选择器4</div>
		<hr>
		<div>普通兄弟选择器1</div>
		<div id="mydiv2">普通兄弟选择器2</div>
		<div>普通兄弟选择器3</div>
		<div>普通兄弟选择器4</div>

 运行效果