【2023.9.14】CSS复合选择器介绍

Emmet语法规范：

标签快速输入：输入标签名，按下tab即可快速生成<></>标签。

按下div*n可以快速生成n个div标签。

嵌套标签用>（如：ul>li)

并列标签用+（如：div+p)

生成n个有类名或者带 id 的标签用.demo*n

CSS复合选择器：

复合选择器包括：后代选择器、子选择器、并集选择器和伪类选择器。

---

后代选择器：又称包含选择器，可以选择父（标签）元素里面的子（标签）元素。

div p{...}/*选择器是父标签 子标签*/
/*子标签可以是父标签的多代子标签*/

或者多重后代也可以：

div p li{...}/*选择器是父标签 子标签*/
/*子标签可以是父标签的多代子标签*/

子元素选择器：只能选择一级子标签，不能选孙标签。

（这些复合选择器中都可以嵌套使用类选择器或id选择器）

.def>p{...}/*选择器是自己定义的标签类，不能是已有标签名*/
<div class = "def">
<p>
......
</p>
</div>

并集选择器：可以选择多组标签，同时为它们选择相同的样式，通常用于集体声明。

div,
p{...}/*选择器是父标签 子标签*/
/*子标签可以是父标签的多代子标签*/

同时选择div和p标签。

伪类选择器：向某些选择器添加特殊效果，有链接伪类，结构伪类等多种伪类选择器。

1.链接伪类选择器：(使用时必须按照下表从上往下的顺序声明，否则选择器失效)

<a href="  "></a>表示超链接。

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

a:link{...}

2.focus伪类选择器：用于选取获得焦点的表单元素。

（如点击搜索栏后，栏框变蓝色）

input:focus {...}