(二)Emmet语法及复合选择器①

pengyulove
113 阅读5分钟

1. Emmet语法

  • 快速生成 HTML 结构代码
  1. 生成标签 直接输名字 tab键，比如div tab键；
  2. 生成多个标签 加上*即可，例如div*3;
  3. 父子级关系标签 用>即可，例如ul>li;
  4. 兄弟关系标签 用+即可，例如div+p;
  5. 带有类名或者id名字的 直接写.demo或#demo tab键即可，例如p.demo；
  6. 如果div类名有顺序，可以用自增符$,例如.demo$*5
  7. 如果想要在生成的标签内部写内容可以用{}表示
  • 快速生成 CSS 样式代码 样式里输入首字母
  • 快速格式化代码 shift+alt+F
    也可设置当我们保存页面时自动格式化代码;
    1)文件--首选项--设置; 2)搜索emmet.include; 3)在settings.json下的【用户】中添加一下语句： "editor.formatOnType":true, "editor.formatOnSave":true,
    只需设置一次，以后都可自动保存格式化代码。

2. CSS的复合选择器

由基础选择器组合而成。

  • 后代选择器
  • 子选择器
  • 并集选择器
  • 伪类选择器

2.1 后代选择器(重要)

又称包含选择器，可以选择父元素里面的子元素。写法是将外层标签写在前面，内层标签写在后面，中间空格分开。

语法

元素1  元素2 { 样式声明; }
例如：ul li { 样式声明; }  /*选择ul里面的li元素*/

上述语法表示选择元素1里面的元素2（后代元素）。

  • 上述语法表示选择元素 1 里面所有的元素 2，最终选择是元素2。
  • 可以连续嵌套，比如可以是孙子等
  • 元素 1、2 可以是任何基础标签

2.2 子选择器(重要)

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

元素1>元素2 { 样式声明; }
例如：div>p { 样式声明; }  /*选择div里面最近一级的p标签元素*/
  • 元素之间用大于号 > 隔开
  • 1 为父级。2为子级，最终选择的是元素2。
  • 元素2必须是亲儿子，其孙子都不归它管。

2.3 并集选择器(重要)

并集选择器可以选择多组标签，同时为他们定义相同的样式。通常用于集体声明。
并集选择器是各选择器通过英文逗号 , 连接而成，任何形式的选择器都可以作为并集选择器的一部分。

语法：

元素1,元素2 { 样式声明; }
例如：ul,div { 样式声明; }  /*选择ul和div标签*/
  • 上述语法表示选择元素1和元素2。
  • 元素1和元素2中间用逗号隔开，逗号可理解成和的意思。
  • 并集选择器通常用于集体声明。

2.4 伪类选择器

伪类选择器用于向某些选择器添加特殊的效果。伪类选择器书写最大特点是用冒号 : 表示。
伪类选择器种类多，比如链接伪类选择器、结构选择器等。

2.4.1 链接伪类选择器

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

注意事项

  1. 确保样式生效，要按照 LVHA 的顺序声明：link，visited，hover，active。
  2. a 链接在浏览器中有默认样式，所以实际开发都需要给链接单独指定样式。

开发中实际写法

a {
  color: gray;
  text-decoration: none;
}
a:hover {
  color: #369;
  text-decoration: underline;
}

2.4.2 focus 伪类选择器

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

input:focus {
      background-color: pink;
      color: red;
}

2.4.3 其他标准伪类选择器

  1. first-child

:first-child 是 CSS 伪类，表示父元素的第一个子元素。

2.  last-child

:last-child CSS 伪类 代表父元素的最后一个子元素。

3.  nth-child(n)

:nth-child(an+b) 这个 CSS 伪类首先找到所有当前元素的兄弟元素，然后按照位置先后顺序从 1 开始排序，选择的结果为 CSS 伪类 :nth-child括号中表达式 (an+b) 匹配到的元素集合 (n=0，1，2，3...)

4.  :not(p)

:not() 用来匹配不符合一组选择器的元素。由于它的作用是防止特定的元素被选中，它也被称为反选伪类。

5.  ::after (:after)

CSS 伪元素 ::after 用来创建一个伪元素，作为已选中元素的最后一个子元素。通常会配合 content 属性来为该元素添加装饰内容。这个虚拟元素默认是行内元素。

我们几乎可以用想要的任何方法给 content 属性里的文字和图片的加上样式.

6.  ::before (:before)

CSS 中，::before 创建一个伪元素，其将成为匹配选中的元素的第一个子元素。常通过 content 属性来为一个元素添加修饰性的内容。此元素默认为行内元素。 使用 ::before 伪元素的一个简单示例就是用于加入引号。

2.5 复合选择器总结

选择器作用特征使用情况隔开符号及用法
后代选择器用来选择后代元素可以是子孙后代较多符号是空格 .nav a
子代选择器选择最近一级元素只能选亲儿子较少符号是大于 .nav>p
并集选择器选择某些相同样式的元素可以用于集体声明较多符号是逗号，.nav, a
链接伪类选择器选择不同状态的链接跟链接相关较多重点记住a{}和a:hover{}
:focus 选择器选择获得光标的表单跟表单相关较少记住input:focus用法
avatar
文章
阅读
粉丝