CSS笔记7：css复合选择器-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_46037153/article/details/109801679
请添加图片描述
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>复合选择器</title>
	</head>
	<style>
		/* 1.后代选择器 */
		/* 我想让ol里面的小li变成粉红色 */
		ol li {
			/* 元素一必须是父级,元素二是子集 */
			color: pink;
		}

		ol li a {
			color: #FF0000;
		}

		.nav li a {
			color: #FFFF00;
		}

		/* 2.子选择器(重要！！！！！！！) */
		.nav>a {
			color: #008000;
		}


		/* 3.并集选择器(重要！！！！！！！) */

		/* 要求1:请熊大熊二改成粉色 */
		/* div,p {                        
			color: #FFC0CB;
		} */

		/* 要求2:请熊大熊二改成粉色色,还有小猪一家改成粉色 */
		div,
		p,
		.pig li {
			color: #FFC0CB;
		}

		/* 约定语法规范:并集选择器竖着写，最后一个选择器之后不要加逗号 */

		/* 4.伪类选择器*/
		/* 	!-- （1.）链接伪类选择器
		a:link选择所有未被访问的选择器
		a:visited选择所有已被访问的选择器
		a:hover选择鼠标指针位于其上的链接
		a:active选择活动链接（鼠标按下未弹起的链接）
		顺序不能乱
		 --> */
		a:link {
			/* 未访问的链接 把没有点击过的链接选出来 */
			color: black;
			text-decoration: none;
		}

		a:visited {
			/* 把已经访问过的链接变成蓝色 */
			color: #0000FF;
		}

		a:hover {
			/* 选择鼠标经过的链接 */
			color: #FF0000;
		}

		a:active {
			/* 鼠标按下未松开的时候 */
			color: #008000;
		}

		/* !!!!!!!!!!!!!!!!!!!!!!平时开发的时候的写法 */
		/* 	a {
			color: gray;
			text-decoration: none;

		}
		a :hover{
			color: red;
			text-decoration: underline;
		} */
		
		
		
		/* 5.focus伪类选择器 */
		/* <!-- 把获取光标的input表单元素选取出来--> */
		input:focus {
			background-color: pink;
			color: #FF0000;
			}
	</style>
	<body>
		<!-- 复合选择器：
		1.后代选择器(重要！！！！！！！)
		2.子选择器(重要！！！！！！！)
		3.并集选择器(重要！！！！！！！)
		4.伪类选择器
		5.:focus选择器 
		 
		 -->
		<!-- 1.后代选择器 -->
		<ol>
			<li>我是ol的孩子</li>
			<li>我是ol的孩子</li>
			<li>我是ol的孩子</li>
			<li><a href="#">我是孙子</a></li>
		</ol>

		<ul>
			<li>我是ul的孩子</li>
			<li>我是ol的孩子</li>
			<li>我是ol的孩子</li>
			<li><a href="#">我是孙子，但是不会变化</a></li>
		</ul>
		<ul class="nav">
			<li>我是ul的孩子</li>
			<li>我是ol的孩子</li>
			<li>我是ol的孩子</li>
			<li><a href="#">我是孙子</a></li>
			<li><a href="#">我是孙子</a></li>
			<li><a href="#">我是孙子</a></li>
			<li><a href="#">我是孙子</a></li>
		</ul>


		<!-- 2.子选择器(重要！！！！！！！) -->
		<!-- 只想选儿子不想选孙子 -->
		<div class="nav">
			<a href="#">我是儿子</a>
			<p>
				<a href="#">我是孙子</a>
			</p>
		</div>

		<!-- 3.并集选择器(重要！！！！！！！) -->
		<div>熊大</div>
		<p>熊二</p>
		<span>光头强</span>
		<ul class="pig">
			<li>小猪佩奇</li>
			<li>猪爸爸</li>
			<li>猪妈妈</li>
		</ul>



		<!-- 4.伪类选择器 (:)链接伪类+结构伪类-->
		<!-- （1.）链接伪类选择器
		a:link选择所有未被访问的选择器
		a:visited选择所有已被访问的选择器
		a:hover选择鼠标指针位于其上的链接
		a:active选择活动链接（鼠标按下未弹起的链接）
		必须按照顺序写lvha
		 -->
		<a href="#">小猪佩奇</a>
		<a href="www.baidui.com">未知的网站</a>

		<!-- 5.:focus伪类选择器 -->


		<input type="text" />
		<input type="text" />
		<input type="text" />







	</body>
</html>