网页前端第三次学习笔记

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>基本选择器</title>
		<style type="text/css">
			/* 通用选择器 */
			*{
				color: #0000FF;
			}
			/* 元素选择器 */
			div {
				font-size: 30px;
			}
			/* id选择器 */
			#P1 {
				background-color: #FAEBD7;
			}
			.cls1 {
				font-family: 楷体;
			}
			font,#P1,.cls1 {
				text-decoration: line-through;
			}
		</style>
	</head>
	<body>
		<!-- 
			CSS基本选择器
				1.通用选择器*
					*{
						属性名：属性值；
						...
					}
				2.元素选择器
					元素名/标签名{
						属性名：属性值；
						...
					}
				3.ID选择器 #
					#id属性值{
						属性名：属性值；
						...
					}
				4.类选择器.
					.class属性值{
						属性名：属性值；
						...
					}
				5.分组选择器
					选择器1，选择器2，选择器3...{
						属性名：属性值；
						...
					}
		 -->
		<div class="cls1">这是一个div</div>
		<div>这是一个div</div>
		<p id="P1">这是一个p</p>
		<span class="cls1">这是一个span</span>
		<br> 
		<font>这是一个font</font>
	</body>
</html>

4.2组合选择器

CSS组合选择器说明两个选择器直接的关系。CSS组合选择符包括各种简单选择符的组合方式。

在CSS中包含了四种组合方式：后代选取器（以空格分隔），子元素选择器（以大于号分隔），相邻兄弟选择器（以分号分隔），普通兄弟选择器（一波浪线分隔）。

4.2.1后代选择器（派生选择器）

用于选择指定标签元素下的后辈元素，以空格分隔

选择器1 选择器2 {

......

}

.food li {

border: 1px solid red;

}

4.2.2子代选择器

选择指定元素的第一代子元素，以大于号>隔开
选择器 > 子代元素 {
属性名：属性值；
...
}

.food2 > li {
border: palegoldenrod dotted 1px;
}

4.2.3相邻兄弟选择器

选择指定的元素的下一个指定元素(只会找一个)，两者有相同的父元素，以加号+隔开
选择器 + 子代元素 {
属性名：属性值；
...
}

#mydiv + div {
background-color: #0000FF;
}

4.2.4普通兄弟选择器

选择指定的元素后面的所有指定元素，两者有相同的父元素，以加号~隔开
选择器 ~ 子代元素 {
属性名：属性值；
...
}

#mydiv2 ~ div {
background-color: #FF0000;
}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>组合选择器</title>
		<style type="text/css">
			/* 后代选择器 */
			.food li {
				border: #9ACD32 solid 1px;
			}
			/* 子代选择器 */
			.food2 > li {
				border: palegoldenrod dotted 1px;
			}
			/* 相邻兄弟选择器 */
			#mydiv + div {
				background-color: #0000FF;
			}
			/* 普通兄弟选择器 */
			#mydiv2 ~ div {
				background-color: #FF0000;
			}
		</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="mydiv">相邻兄弟选择器2</div>
		<div >相邻兄弟选择器3</div>
		<div >相邻兄弟选择器4</div>
		<hr >
		<div >普通兄弟选择器1</div>
		<div id="mydiv2">普通兄弟选择器2</div>
		<div >普通兄弟选择器3</div>
		<div >普通兄弟选择器4</div>
	</body>
</html>