CSS学习笔记——Emmet语法，复合选择器

目录

• Emmet语法
  • 快速生成html结构
  • 快速生成CSS样式
• 复合选择器
  • 后代选择器
  • 子元素选择器
  • 并集选择器（重要）
  • 伪类选择器
  • focus 伪类选择器

1|0Emmet语法

1|1快速生成html结构

1.生成标签直接输入标签名按tab键即可比如div然后tab键，就可以生成<div></div>。

2.如果想要生成多个相同标签加上*就可以了比如 div*3就可以快速生成3个div。

3.如果有父子级关系的标签，可以用>比如ul>li就可以了。

4.如果有兄弟关系的标签，用+就可以了比如div+p。

5.如果生成带有类名或者id名字的，直接写demo或者two或p.one就可以了。

6.如果生成的div类名是有顺序的，可以用自增符号$，例demo$*5

7.如果想要在生成的标签内部写内容可以用{}表示，例div{$}*5生成5个有序的div。

1|2快速生成CSS样式

w200可以生成width: 200px;

lh26可以生成line-height: 26px;

2|0复合选择器

复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的。

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

2|1后代选择器

语法

元素1 元素2 { 样式声明 }

选择元素1里面的所有元素2（后代元素）。

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

元素1和元素2可以是任意基础选择器。

案例

/* 把ol里面的li改为pink */
ol li {
    color: pink;
}

2|2子元素选择器

子元素选择器（子选择器）只能选择作为某元素的最近一级子元素。

语法：

元素1>元素2 { 样式声明 }

2|3并集选择器（重要）

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

并集选择器是各选择器通过英文逗号（，）连接而成，任何形式的选择器都可以作为并集选择器的一部分。

语法：

元素1,
元素2 { 样式声明 }

上述语法表示选择元素1和元素2。

例如：

ul,
div { 样式声明 } /* 选择ul和div标签元素 */

元素1和元素2中间用逗号隔开。

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

并集选择器通常用干集体声明。

2|4伪类选择器

伪类选择器用于向某些选择器添加特殊的效果，比如给链接添加特殊效果，或选择第1个，第n个元素。

伪类选择器书写最大的特点是用冒号(:)表示,比如:hover、:first-child。

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

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

链接伪类选择器注意事项

1. 为了确保生效，请按照LVHA的循顺序声明:link :visited :hover :active。

2. 记忆法：love hate或者v包包hao。

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

2|5focus 伪类选择器

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

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

input:focus {
    background-color: yellow;
}

__EOF__

本文作者：Tyu
本文链接：https://www.cnblogs.com/Tyu-t/p/15773025.html
关于博主：评论和私信会在第一时间回复。或者直接私信我。
版权声明：本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！
声援博主：如果您觉得文章对您有帮助，可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力！