CSS复合选择器

后代选择器（重要）

后代选择器（descendant selector）又称为包含选择器。
后代选择器可以选择作为某元素后代的元素。
语法结构：

元素1 元素2 { 样式声明 } /*选择元素1里面的所有元素2*/

例：

ol li{ color: pink  }

• 元素1与元素2之间用空格分开。
• 元素1与元素2可以是任意基础选择器
• 元素1是父级，元素2是子集，被选择的是元素2
• 元素2可以是儿子，也可是孙子，只要是元素1的后代均可选择，可以一层一层继续选择下去
• 也可选择已有元素类下的后代，例：

  .nav li a { color: pink  }
  //其中：<ul class="nav">
  

  子选择器

  与后代选择器相比，子元素选择器（Child selectors）只能选择作为某元素最近一级子元素，也就是“亲儿子”。
  语法结构：

  元素1 > 元素2 { 样式声明 } /*选择元素1里面的所有元素2*/
  

   p > a {
        color: rgb(66, 19, 126);
         }
  

• 元素1与元素2之间用>分开。
• 元素1与元素2可以是任意基础选择器
• 元素1是父级，元素2是子集，被选择的是元素2
• 元素2必须是亲儿子（最近一级子元素）

并集选择器

选择多个元素一起定义样式

语法结构：

元素1 ， 元素2 { 样式声明 } /*选择元素1和元素2*/

   div,
   span {
      color: rgb(14, 158, 177);
   }

• 并集选择器是各选择器用（ ,）连接起来的，任何形式的选择器都可以作为并集选择器的一部分
• 逗号理解为“和”
• 并集选择器常用于集体声明
• 约定的语法规范，并集选择器需要竖着写
  - 最后一个选择器不需要加逗号

伪类选择器

CSS 伪类用于向某些选择器添加特殊的效果。

链接伪类选择器：

 /*选择未访问过的链接*/
    a:link {
      color: rgb(226, 53, 53);
    }
    /* 选择所有已访问的链接 */
    a:visited {
      color: gray;
    }
    /* 选择鼠标位于其上的链接 */
    a:hover {
      color: green;
    }
    /* 选择活动链接（鼠标按下未弹起的链接) */
    a:active {
      color: blue;
    }

• 在书写时，尽量按照顺序书写：link-visited-hover-active
• 因为链接在浏览器中有默认样式，所以实际运用中都需要单独指定样式

focus伪类选择器：
用于选取获得焦点的表单元素
（焦点即为光标，一般<input>类表单才能获取，因此这个选择器也主要针对表单元素来说）

/* focus伪类选择器 */
    .name:focus {
      background-color: #336699;
      color：red;
    }

    .mima:focus {
      background-color: #219712;
    }

/*表格*/
<form>
      用户名： <input type="text" value="请输入" class="name" /> 
      密码：<input type="password" value="password" class="mima" /></form>