emmet语法

快速生成HTML结构语法

  • 生成标签直接输入标签名按tab键即可比如div然后tab键，就可以生成<div></div>
  • 如果想要生成多个相同标签加上＊就可以了比如div*3就可以快速生成3个div
  • 如果有父子级关系的标签，可以用>比如ul>li就可以了
  • 如果有兄弟关系的标签，用+就可以了比如div+p
  • 如果生成带有类名或者id名字的，直接写.demo或者#two tab键就可以了
  • 如果生成的div类名是有顺序的，可以用自增符号$

快速生成CSS结构语法

CSS基本采取简写形式即可.

  1. 比如w200按tab可以生成width:200px;

  2. 比如Ih26按tab可以生成line-height:26px;

    <!DOCTYPE html>
<html lang="en">
  <head>
 <meta charset="UTF-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 <title>Document</title>
 <style>
   .one {
     text-indent: 2em;
     width: 100px;
     height: 200px;
   }
 </style>
  </head>
  <body>
 <div class="one">666</div>
  </body>
</html>

复合选择器

在CSS中，可以根据选择器的类型把选择器分为基础选择器和复合选择器，复合选择器是建立在基础选择器之上，对基本选择器进行组合形成的。

  • 复合选择器可以更准确、更高效的选择目标元素（标签）
  • 复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的

后代选择器

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

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      ol li {
        color: pink;
      }
      ul li {
        color: red;
      }
      ol li a {
        color: aqua;
      }
      .nav li {
        color: blue;
      }
    </style>
  </head>
  <body>
    <ol>
      <li>我是ol的孩子</li>
      <li>我是ol的孩子</li>
      <li>我是ol的孩子</li>
      <li><a href="baidu.com">百度一下</a></li>
    </ol>
    <ul>
      <li>我是ul1的孩子</li>
      <li>我是ul1的孩子</li>
      <li>我是ul1的孩子</li>
    </ul>
    <ul class="nav">
      <li>我是ul2的孩子</li>
      <li>我是ul2的孩子</li>
      <li>我是ul2的孩子</li>
    </ul>
  </body>
</html>
  • 元素1和元素2中间用空格隔开
  • 元素1是父级，元素2是子级，最终选择的是元素2
  • 元素2可以是儿子，也可以是孙子等，只要是元素1的后代即可
  • 元素1和元素2可以是任意基础选择器

子元素选择器

子元素选择器（子选择器）只能选择作为某元素的最近一级子元素。简单理解就是选亲儿子元素.
语法：元素1>元素2{样式声明}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .nav > a {
        color: red;
      }
    </style>
  </head>
  <body>
    <div class="nav">
      <a href="#">div的儿子</a>
      <p><a href="#">div的孙子</a></p>
    </div>
  </body>
</html>
  • 元素1和元素2中间用大于号隔开
  • 元素1是父级，元素2是子级，最终选择的是元素2
  • 元素2必须是亲儿子，其孙子、重孙之类都不归他管.和后代选择器的区别就在这里，后代选择器包括孙子，重孙子。