当前位置: 移动技术网 > IT编程>网页制作>HTML > Emmet语法和CSS复合选择器

Emmet语法和CSS复合选择器

2020年07月24日  | 移动技术网IT编程  | 我要评论
Emmet语法Emmet语法的前身是Zen coding,它使用缩写来提高html/css的编写速度,Vscode内部已经集成该语法。1、快速生成HTML结构语法2、快速生成CSS样式语法3、快速格式化代码CSS的复合选择器复合选择器是建立在基础选择器之上的,对基础选择器进行组合形成的。复合选择器可以更准确、更高效的选择目标元素。复合选择器是由两个或多个基础选择器通过不同的方式组合而成的。常用的复合选择器包括:后代选择器、子选择器、并集选择器、伪类选择器等等。后代选择器(重要)

Emmet语法

Emmet语法的前身是Zen coding,它使用缩写来提高html/css的编写速度,Vscode内部已经集成该语法。
1、快速生成HTML结构语法
在这里插入图片描述
2、快速生成CSS样式语法
在这里插入图片描述
3、快速格式化代码
在这里插入图片描述

CSS的复合选择器

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

  • 复合选择器可以更准确、更高效的选择目标元素。
  • 复合选择器是由两个或多个基础选择器通过不同的方式组合而成的。
  • 常用的复合选择器包括:后代选择器、子选择器、并集选择器、伪类选择器等等。

后代选择器(重要)
又称为包含选择器,可以选择父元素里面子元素。当标签发生嵌套时,内层标签就是外层标签的后代。
语法:
在这里插入图片描述

  • 后者是前者的后代元素。
  • 两元素之间一定用空格隔开。
  • 最终选择的是后者元素。
  • 后者可以是儿子也可以是孙子,只要是前者的后代即可。
  • 两元素可以是任意基础选择器。

子选择器(重要)
只能选择作为某元素的最近一级子元素。即选亲儿子元素。
在这里插入图片描述

  • 两元素中间用大于号隔开
  • 1是父级2是子级,最终选择的是2
  • 必须是亲儿子,其他不行。

并集选择器(重要)
可以选择多组标签,同时为他们定义相同的样式,用于集体声明。
在这里插入图片描述

  • 各选择器通过逗号连接而成
  • 任何形式的选择器都可以作为并集选择器的一部分。
  • 选择元素1和元素2
  • 通常用于集体说明
  • 最后一个选择器不加逗号

伪类选择器
向某些选择器添加特殊的效果,比如给链接添加特殊效果,或选择第一个,第n个元素。
用冒号表示,比如:hover。

链接伪类选择器:
在这里插入图片描述
注意事项:
1、为了确保生效,按照LVHA的循顺序声明:link-:visited-:hover-:active。
2、记忆法 lovehate。
3、a链接在浏览器中有默认样式,所以实际工作中需要给链接单独指定样式。
实际开发中经常的写法:
在这里插入图片描述
focus伪类选择器
用于选取获得焦点的表单元素
焦点就是光标,一般情况下<input>类表单元素才能获取,因此这个选择器主要针对表单元素来说。
在这里插入图片描述
复合选择器总结
在这里插入图片描述

本文地址:https://blog.csdn.net/qq_49037451/article/details/107530839

如您对本文有疑问或者有任何想说的,请点击进行留言回复,万千网友为您解惑!

相关文章:

验证码:
移动技术网