CSS 复合选择器

一、emmet语法

快速生成HTML结构语法

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

快速生成CSS样式语法

• 比如 w200 按tab 可以 生成 width: 200px;
• 比如 lh26px 按tab 可以生成 line-height: 26px;
  
  

二、css的复合选择器

1.后代选择器 (重要）

注意: 后代包括儿子、 孙子、曾孙子

特点： 后代选择器使用空格隔开

.box h2 {
     color: brown;
 }

<div class="box">
      <h2>我是大哥</h2>
      <div>
        <h2>我是孙子</h2>
      </div>
      <h2>我是老妖</h2>
</div>

2.子代选择器 (重要）

定义：子元素选择器（子选择器）只能选择作为某元素的最近一级子元素.（简单理解就是选亲儿子元素）
特点： 子代选择器使用大于号隔开

 .box > strong {
    color: pink;
}

 <div class="box">
      <strong>我是儿子</strong>
      <p>
        <strong>我是孙子</strong>
      </p>
 </div>

3.并集选择器 (重要）

定义：并集选择器可以选择多组标签, 同时为他们定义相同的样式。通常用于集体声明.
特点： 多个选择器之间逗号隔开， 选择器类型不限.

	  p,
      span,
      .red {
        color: tomato;
      }

<p>我和你</p>
    <p>我和你</p>
    <p>我和你</p>
    <span>我和你</span>
    <span>我和你</span>
    <span>我和你</span>
    <div class="red">我和你</div>
    <div>我和你</div>
    <h1>我和你</h1>
    <h1>我和你</h1>

4.交集选择器

定义：其中第一个为标签选择器，第二个为class选择器.
特点:两个选择器之间不能有空格.
特点： 标签+类，中间点连接，不加空格。
注意：div和 .red之间不能有空格, 必须以标签开头.

div.red {
    color: #f00;
}

 <div class="red">大哥</div>
 <div>二哥</div>
 <div>三哥</div>
  <span class="red">大姐</span>
  <span>二姐</span>
 <span>三姐</span>

5.链接伪类选择器

a:link       /* 未访问的链接 */
a:visited    /* 已访问的链接 */
a:hover     /* 鼠标经过的连接 */
a:active     /* 鼠标按下还未弹起的链接 */
/*平时我们只用:hover,其他不用*/
 /* 1.未访问的链接 a:link  把没有点击过的(访问过的)链接选出来 */
      a:link {
        color: #333;
        text-decoration: none;
      }

      /*2. a:visited 选择点击过的(访问过的)链接 */
      a:visited {
        color: orange;
      }

      /*3. a:hover 选择鼠标经过的那个链接 */
      a:hover {
        color: skyblue;
      }

      /* 4. a:active 选择的是我们鼠标正在按下还没有弹起鼠标的那个链接 */
      a:active {
        color: green;
      }

:hover补充

• 实现鼠标点击改变盒子背景颜色
• :hover 并不是仅仅只有a标签才有 盒子也有

 .box {
        width: 100px;
        height: 100px;
        background-color: #f00;
      }
      .box:hover {
        background-color: #00f;
      }

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

input:focus {
        background-color: #00ff40;   表单背景颜色
        color: #fff;                 表单文字颜色
      }