CSS---Emmet语法-CSS的复合选择器---6.22

Emmet语法

Emmet语法的前身是zen coding，它使用缩写，来提高html/css的编写速度，Vscode内部已经集成该语法。

1.快速生成HTML结构语法。

1.生成标签 直接输入标签名即可，比如div然后tab键，就可以生成<div></div>
2.如果想要生成 多个相同标签，加上 * 就可以了，比如 div*3 就可以快速生成3个div
3.如果有父子级关系的标签，可以用 > 比如 ul>li
4.如果有兄弟关系的标签，用+，比如div+p
5.如果生成带有类名或者id名字，直接写.demo或者#two，默认生成div标签(p.demo设置p标签)
6.如果生成的div类名是有顺序的，可以用自增符号$（.demo$*5）
7.如果想要在生成的签内部写内容可以用 { } 表示（div{fanfan}*5）

2.快速生成CSS样式语法。（简写）

1.比如 w200 按tab 可以生成 width:200px；
2.比如 Ih26 按tab可以生成 line-height:26px；

---

---

---

CSS的复合选择器

复合选择器是建立在基础选择器之上，对基本选择器进行组合形成的。

复合选择器可以更准确、更高效的选择目标元素（标签）

常用的复合选择器包括：后代选择器、子选择器、并集选择器、伪类选择器等等

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

选择元素1（ol）里的所有元素2（li）元素叫后代选择器。（li是ol的后代）

元素2可以是儿子，也可以是孙子，只要是元素1的后代即可。元素12可以是任意基础选择器。

 ol li { color: pink; }

2.子选择器（子元素选择器）只能选择作为某元素的最近一级子元素。简单理解：选亲儿子元素。

   选择元素1里面的所有直接后代（子元素）元素2

元素1 > 元素2 { 样式声明 }
  <style>
        .son > a { color: deeppink; }
    </style>
  
    <div class="son">
      <a href="#">我是儿子</a>
      <p>  <a href="#">我是孙子</a>  </p>
    </div>

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

逗号可以理解为和的意思。

元素1,元素2 { 样式声明 }
div,
p,
.pig li { color: deeppink; }

4.伪类选择器用于向某些选择器添加特殊的效果，比如给链接添加特殊效果，或选择第1个，第n个元素。 书写特点是用冒号（：）表示，比如：hover、：first-child。

伪类选择器很多，比如有链接伪类、结构伪类等，所以这里先讲解常用的链接伪类选择器

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

链接伪类选择器注意事项：

1.为了确保生效，请按照LVHA的循顺序声明：link-：visited  -：hover  -：active（love hate）

2.因为a链接在游览器中具有默认样式，所以我们实际工作中都需要给链接单独指定样式

a { color:gray; }
a:hover { color:red; }

---

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

焦点就是光标，一般情况<input>类表单元素才能获取，因此这个选择器也主要针对于表单元素。

input：focus { background-color：yellow; }

---

---

---

复合选择器总结