emmet语法

快速生成HTML结构语法

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

快速生成CSS结构语法

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

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

比如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必须是亲儿子，其孙子、重孙之类都不归他管.和后代选择器的区别就在这里，后代选择器包括孙子，重孙子。

并集选择器

并集选择器可以选择多组标签，同时为他们定义相同的样式。通常用于集体声明
并集选择器是各选择器通过英文逗号（,）连接而成，任何形式的选择器都可以作为并集选择器的一部分。
语法元素1，元素2{样式声明}
例如：ul,div{样式声明}

<!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>
      div,
      p,
      .pig li {
        color: pink;
      }
    </style>
  </head>
  <body>
    <div>熊大</div>
    <p>熊二</p>
    <span>光头强</span>
    <ul class="pig">
      <li>小猪佩奇</li>
      <li>猪爸爸</li>
      <li>猪妈妈</li>
    </ul>
  </body>
</html>

伪类选择器

伪类选择器用于向某些选择器添加特殊的效果，比如给链接添加特殊效果，或选择第1个，第n个元素。
伪类选择器书写最大的特点是用冒号（：）表示，比如：hover、：first-child。

链接伪类选择器

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

<!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>
      a:link {
        color: #333;
        text-decoration: none;
      }
      a:visited {
        color: orange;
      }
      a:hover {
        color: aqua;
      }
      a:active {
        color: blue;
      }
    </style>
  </head>
  <body>
    <a href="#">百度一下</a>
    <a href="https://baidu.com">百度两下</a>
  </body>
</html>

注意事项：

为了确保生效，请按LVHA的循顺序声明:link-:visited-:hover-:active。
因为a链接在浏览器中具有默认样式，所以我们实际工作中都需要给链接单独指定样式。
常用的写法是这样a { color: #333; } a:hover {color: blue;}改变a标签的默认颜色，然后当鼠标放在标签上面，又是一个颜色。

focus伪类选择器

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

<!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>
      input:focus {
        background-color: aqua;
        color: red;
      }
    </style>
  </head>
  <body>
    <input type="text" />
    <input type="text" />
    <input type="text" />
  </body>
</html>

Html笔记-4-CSS基础语法(2)