嵌套选择器基础重点

一、嵌套选择器

它可能适用于选择器内部的选择器的样式。
在下面的例子设置了三个样式：

p{ }: 为所有 p 元素指定一个样式。
.marked{ }: 为所有 class=“marked” 的元素指定一个样式。
.marked p{ }: 为所有 class=“marked” 元素内的 p 元素指定一个样式。
p.marked{ }: 为所有 class=“marked” 的 p 元素指定一个样式。

二、css复合选择器

1. id的用法和元素标签类似

.myclass1 .myclass2是表示两个class使用同一个样式，而不是嵌套。class也能嵌套class。但是若两个.myclass之间没有空格则表示同时拥有这两个class
元素标签嵌套元素标签 p span < p >< span >< /span >< /p >

复合选择器的类型

选择器	作用	特征	隔开符号及用法
后代选择器	用来选择后代元素	可以是子孙后代（多级）	空格隔开
子代选择器	用来选择最近一级元素	只能选择最近一级	大于号连接
并集选择器	选择某些可以使用相同样式的元素	可以用于集体声明	英文逗号连接
链接伪类选择器	选择不同状态的链接	跟链接相关	重点记住a{} a:hover在实际开发中的写法
:focus选择器	选择获得光标的表单	跟表单相关	input:focus记住这个写法

详细解说

（1）交集选择器

1. 描述：
交集选择器由两个选择器组成。其中第一个选择器为标签选择器，第二个选择器为类名选择器。
2. 代码示例

div.jiaoji{
		color: blue;
	}
<div class="jioaji">交集选择器</div>

解说：类名为class的标签的颜色就会变为蓝色

(2)并集选择器

1. 描述：
并集选择器是各个选择器之间以逗号隔开，任何形式的选择器都可以作为并集选择器的一部分。如果某些选择器定义的样式相同即可用并集选择器来处理。
并集选择器有和的意思，也就是说，只要逗号隔开的，所有选择器都会执行后面的样式。
2. 代码示例

div,p,span{
		color: red;
	}
<div>并集选择器</div>
<p>并集选择器</p>
<span>并集选择器</span>

解说：三个标签的颜色就都会变为红色

(3)后代选择器

1. 描述：
后代选择器又称为包含选择器，用来选择元素或元素组的后代，其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔。当标签发生嵌套时，内层标签就成为外层标签的后代。
子孙后代都可以这么选择。 或者说，它能选择任何包含在内 的标签。
2. 代码示例

div p{
		color: pink;
	}
<div>
		<p>段落1</p>
</div>

解说：段落1的颜色就会变为粉色。

(4)子元素选择器

1. 描述：
子元素选择器只能选择作为某元素子元素的元素。其写法就是把父级标签写在前面，子级标签写在后面，中间跟一个 > 进行连接，注意，符号左右两侧各保留一个空格
2. 代码示例

ul>li>a{
		color: green;
	}
<ul>
		<li>
			<a href="#">一级菜单</a>
			<div>
				<a href="#">二级菜单</a>
				<a href="#">二级菜单</a>
				<a href="#">二级菜单</a>
			</div>
		</li>
	</ul>

解说：一级菜单的颜色就会变为绿色。

其他类型举例

#div p a{color:#900;}	div内的p标签内的链接a标签的文字颜色为红色

来源

前端菜鸟szy
jtzzz