css基础知识之复合选择器_各种复合选择的的语法-优快云博客

css复合选择器

后代选择器又称为包含选择器,可以选择父元素里的子元素,其写法就是:把外层标签写在外面,内层标签写在后面,中间用空格分开。当标签发生嵌套时,内层标签就成为外层标签的后代。

语法:元素1(空格)元素2 {样式声明}

上述语法表示选择"元素1"里所有的"元素2"(后代元素)。

注意:
1."元素1"是父级,“元素2"是子级,最终选择的是"元素2”。

2."元素2"可以是儿子,也可以是孙子等,只要是"元素1"的后代即可。

3.“元素1”,"元素2"可以是任意的基础选择器.（可以是标签选择器，类选择器，id选择器）。

需求：我想要把 “ol” 里的 “li” 选择出来,改为pink 。

			ol li {
				color: pink;
			}

子元素选择器(子选择器)。只能选择作为某元素的最近一级子元素。简单理解就是选择"亲儿子"。

语法:“元素1”>“元素2” {样式声明}
例;

			.nav>a {
				color: red;
			}

		<div class="nav">
			<a href="#">我是儿子</a>
			<p>
				<a href="#">我是孙子</a>
			</p>
		</div>

效果：
在这里插入图片描述

并集选择器可以选择多组标签,同时为它们定义相同的样式。

语法:“元素1”,“元素2” {样式声明}

注意:
1.上述语法表示选择"元素1"和"元素2"。

2.“元素1”,"元素2"中间用逗号隔开。逗号可以理解为"和"的意思.。

3.并集选择器常用于集体声明。

4.任何形式的选择器都可以作为并集选择器的一部分。

		<div>熊大</div>
		<p>熊二</p>
		<span>光头强</span>
		<ul class="pig">
			<li>小猪佩奇</li>
			<li>猪爸爸</li>
			<li>猪妈妈</li>
		</ul>

需求：请把熊大和熊二,小猪一家改为粉色。

			div,
			p,
			.pig li {
				color: pink;
			}

注意：
约定的语法规范,我们并集选择器喜欢竖着写。一定要注意,最后一个选择器不需要加逗号。

a:link 选择所有未被访问的链接。
a:visited: 选择所有已被访问的链接。
a:hover 选择鼠标指针位于其上的链接。
a:active 选择活动链接(鼠标按下未弹起的链接) 。

注意：
1.为了确保生效,请按照 “LVHA” 的顺序声明.(助记:love hate ）。

2.因为"a"链接在浏览器中具有默认样式,所以我们实际工作中都要给链接单独指定样式. 直接写body {color: red;}是没用的,链接不会变色。（和权重有关）。

伪类选择器用于选择获得焦点的表单元素.焦点就是光标,一般情况 <input>类表单才能获取,因此,这个选择器业主要针对表单元素来说。

					input:focus {
					background-color: pink;
					color: red;
					}/* 把获得光标的input表单元素选取出来 */

表单元素获得光标后，背景颜色改为粉色，光标和写上去的内容都会变成红色。

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

效果：
在这里插入图片描述
当失去光标后，背景颜色，和字的颜色都会消失。