什么是复合选择器？

由两个或者多个基础选择器组合而成，为了更准确的找到目标元素标签，快速开发。

1.后代选择器

又称包含选择器，后者是前者的子孙后代，可以是曾孙子这种隔代的，不同标签用空格分开
父级 子孙级{属性:属性值;属性:属性值;}

2.子元素选择器

后者是前者的亲儿子，不是孙子之类，不同标签用大于号分开
父级>子级{属性:属性值;属性:属性值;}

3.并集选择器

不同的标签定义相同的样式，标签无需从属关系，不同标签用逗号分开
a,li{属性:属性值;属性:属性值;}

4.链接伪类选择器

1：a:link(未访问标签)
2：a:visited(已访问标签)
3：a:hover(鼠标移动到链接上)（常用，可拓展其他标签）
4：a:active（选定的链接）
例：
    style：
        a:visited {
            color: red;
        }
    body：
    <a href="https://www.baidu.com">跳转百度</a>

5.其他伪类选择器

:first-child 选择第一个元素
:last-child 选择最后一个元素
:noth-child() 
    odd/2n+1 奇数 
    even/2n 偶数
    3n+1 自定义
:focus 输入框获取焦点

元素

块级元素（block-level）

div，hX，p，ul，ol，li，table
特点：独占一行，可以设置宽高

行内元素（inline-level）

span，a
特点：不独占一行，不能设置宽高

行内块元素（inline-block）

img，input，td
特点：不独占一行，可以设置宽高

元素间的互相转换

属性：display：
            block（块级）
            inline（行内）
            inline-block(行内快)
            none（隐藏元素）

拓展

    <style>
        *{
          margin: 0;
          padding: 0;
        }
        div{
          text-align: center;
        }
        .A{
          width: 180px;
          height: 300px;
          border: 1px solid red;
          margin-left: 40px;
        }
        .B{
          background-color: aqua;
          /* text-align: center; */
          height: 40px;
          line-height: 40px;
        }
        ul{
          list-style-type: none;
          height: 100px;
          background-color: beige;
          display: none;
        }
        li{
          height: 33px;
          line-height: 33px;
          border: 1px solid green;
        }
        .A:hover ul{
          display: block;
        }
        ul:hover li{
          background-color: rgb(99, 231, 43);
        }
  </style>
  
   <div class="A">
    <div class="B">商品</div>
    <div>
      <ul>
        <li class="C">可乐</li>
        <li class="D">方便面</li>
        <li class="E">牛肉肠</li>
      </ul>
    </div>
  </div>