这是我参与【第五届青训营】伴学笔记创作活动的第六天。

关系选择器

• 父元素：直接包含子元素的元素叫做父元素
  
• 子元素：直接被父元素包含的元素是子元素
  
• 祖先元素：直接或间接包含后代元素的元素叫做祖先元素；一个元素的父元素也是它的祖先元素
  
• 后代元素:直接或间接被祖先元素包含的元素叫做后代元素；子元素也是后代元素
  
• 兄弟元素：拥有相同父元素的元素是兄弟元素
  

子元素选择器

• 作用:选中指定父元素的指定子元素
  
• 语法：父元素>子元素
  
• 例子：A>B
  

<style>
        div.box>span>p{
            color: brown;
        }
    </style>

后代选择器

• 作用：选中指定元素内的指定后代
  
• 语法:祖先 后代
  
• 例子:A B
  

        div span{
            color: aqua;
        }

兄弟选择器

• 作用：选择下一个兄弟
  
• 语法:前一个+下一个 ，前一个+下一组
  
• 例子：A1+A2
  
• A1~An
  

p + span {
  color: red;
}

p ~ span {
  color: red;
}

伪类选择器

伪类(不存在的类，特殊的类)
伪类用来描述一个元素的特殊状态，比如：第一个子元素，被点击的元素，鼠标移入的元素....
伪类一般情况下都是使用:开头；

• :first-child第一个子元素
  
• :last-child最后一个子元素
  
• :nth-child选中第n个子元素
  

1. • n:第n个，n的范围0到正无穷
     
2. • 2n或even:选中偶数的元素
     
3. • 2n+1或odd:选中奇数位的元素
     

以上这些伪类都是根据所有的子元素进行排序的

• :first-of-type同类型中的第一个梓元素
  
• :last-of-type同类型中的最后一个子元素
  
• :nth-of-type()选中同类型中的第n个子元素
  这几个伪类的功能和上述的类似，不同点是他们是在同类型元素中进行排序的
  
• :not()否定伪类，将符合条件的元素从选择器中去除。

/* ul下所有li，黑色 */
ul > li {
  color: black;
}

/* ul下第偶数个li，黄色 */
ul > li:nth-child(2n) {
  color: yellow;
}

/* ul下第奇数个li，绿色 */
ul > li:nth-child(odd) {
  color: green;
}

/* ul下第一个li，红色 */
ul > li:first-child {
  color: red;
}

/* ul下最后一个li，黄色 */
ul > li:last-child {
  color: orange;
}