CSS之Emme语法t和结构伪类 (八)：认识Emmet、常见Emmet语法、常见的结构伪类、否定伪类的使用

跳转目录🚀

篇章	知识点
CSS之邂逅(一)	认识CSS、编写CSS样式、CSS注释、常见的CSS属性
CSS额外知识补充(二)	link元素、计算机进制、CSS表示颜色、Chorme调试工具、浏览器渲染流程
CSS属性与选择器(三)	CSS文本属性、CSS字体属性、CSS常见选择器
CSS属性的特性(四)	CSS属性的继承、CSS属性的层叠、CSS属性的类型、display属性、元素的隐藏、overflow属性、CSS不生效技巧
CSS盒子模型(五)	认识盒子模型、内容width/height、内边距padding、边框/圆角border、外边距margin、盒子和文字阴影、box-sizing
CSS设置背景(六)	background-(image、repeat、size、position、attachment)、background、background-image和img对比
CSS高级元素的使用(七)	列表元素、表格元素、表格合并、表单元素、表单常见属性
CSS之Emme语法t和结构伪类(八)	认识Emmet、常见Emmet语法、常见的结构伪类、否定伪类的使用
CSS额外知识补充(九)	border图形、Web网络字体、Web字体图标、CSS精灵图、cursor属性
CSS元素定位(十)	标准流布局、认识元素的定位、静态定位、相对定位、固定定位、绝对定位、粘性定位、z-index
CSS元素浮动(十一)	认识浮动、浮动的规则、浮动的案例、高度塌陷、清除浮动、布局方案对比
CSS flex布局(十二)	认识flex布局、flex布局的理解、flex-container属性、flex-item属性

1. 认识Emmet

1.1 Emmet的背景

• Emmet (前身为 Zen Coding) 是一个能大幅度提高前端开发效率的一个工具.
• 在前端开发的过程中，一大部分的工作是写 HTML、CSS 代码, 如果手动来编写效果会非常低。VsCode内置了Emmet语法,在后缀为.html/.css中输入缩写后按Tab/Enter键即会自动生成相应代码

1.2 使用emmet语法

这里例举一下emmet语法，大多数比较常用的

emmet语法	含义	案例
! 或 html:5	可以快速生成完整结构的html5代码	无
>	子代	div>ul>li
+	兄弟	div+div>p>span+i
*	多个	ul>li*5
^	上一级	div+div>p>span^^^^h1
( )	分组	div>(header>ul>li*2>a)+footer>p
#	id属性	div#header+div#main
.	class属性	.container
[ ]	普通属性	a[href=“http://www.baidu.com”]
{ }	内容	p{文字内容}
$	数字	ul>li{item$}*5
.类名 等	隐式标签	在 ul>.item*3 时自动会生成li 或者在.类名时会生成对应类名的div ，根据不同场景进行判断

2. 常见的结构伪类

• 强调一下：
  1. 伪类 => 表示符合特殊状态下的选中元素
  2. 伪元素 => 表示选中元素后的特定部分

以下会介绍几个比较常用的结构伪类，并且我们需要记住一些简单的公式。

:nth-child( )

• 作用：表示从前往后看，选择第 n 个子元素，其中n为自然数(0,1,2,3,4……)
• 几种常用的公式
  1. :nth-child(n)：表示选择第几个子元素（第n个）
  2. :nth-child(2n) 或者 :nth-child(even)：是父元素中的第偶数个子元素（第2、4、6、8…个）
  3. :nth-child(2n + 1) 或者 :nth-child(odd)：是父元素中的第奇数个子元素（第1、3、5、7…个）
  4. nth-child(-n + x)：表示从前往后数的前几项（前x项）

:nth-last-child( )

• 作用：表示从后往前看，选择第 n 个子元素，其中n为自然数(0,1,2,3,4……)
• nth-last-child()的常用公式相同，不同点是:nth-last-child()从最后一个子元素开始往前计数

:nth-of-type( )

• 作用：用法跟:nth-child()类似，不同点是:nth-of-type()计数时只计算同种类型的元素

:nth-last-of-type( )

• 作用：用法跟:nth-of-type()类似，不同点是:nth-last-of-type()从最后一个这种类型的子元素开始往前计数

3. 其它常见的伪类

• :first-child：等同于:nth-child(1)
• :last-child：等同于:nth-last-child(1)
• :first-of-type：等同于:nth-of-type(1)
• :last-of-type：等同于:nth-last-of-type(1)
• :only-child：是父元素中唯一的子元素
• :only-of-type：是父元素中唯一的这种类型的子元素
• :root：根元素，就是HTML元素
• :empty：代表里面完全空白的元素

4. 否定伪类 :not( )

用法： :not()的格式是:not(x)，x是一个简单选择器(元素选择器、通用选择器、属性选择器、类选择器、id选择器、伪类（除否定伪类))
含义：:not(x)表示除x以外的元素