css选择器的使用

1.关系选择器

2.属性选择器

3.伪类选择器

1.1子元素选择器：

作用：通过父元素找到对应的子元素

语法：父>子{}

例如：div>span

div > span {
        color: red;
      }

1.2后代选择器

作用：通过祖先元素找到指定的后代元素

语法：祖先 后代{}

例子：div #s

div #s {
        color: red;
      }

1.3相邻兄弟选择器

作用：通过兄元素找到相邻弟的元素，只找相邻的一个弟弟

语法：兄+弟{}

例子：#s+span

#s+span {
        color: red;
      }

1.4选择所有兄弟选择器

语法：兄~弟{}

注意：前面的兄弟不选

例子：#s~span{}

#s~span {
        color: red;
      }

2.1属性选择器

语法：

[属性名]{}选择含有指定属性的元素

[属性名=属性值]{}选择含有指定属性和属性值的元素

[属性名^=属性值]{}选择以指定属性值开头的元素

[属性名$=属性值]{}选择以指定属性值结束的元素

[属性名*=属性值]{}选择属性值含有某值的元素

3.1伪类选择器

不存在的类，用来表示一个元素特殊的状态

例如：第一个元素   被点击元素   鼠标移入的元素

语法：

1、 :first-child  第一个子元素

2、 :last-child   最后一个子元素

3:  :nth-child()  选中第几个元素

特殊值  

n  选择所有的

2n+1/odd  选中奇数

2n/even    选中偶数

注意：以上所有的伪类都是根据所有的子元素进行排序

1、 :first-of-type 同类型的第一个

2、 :last-of-type  同类型的最后一个

3、 :nth-of-type()  同类型选择哪个

 li:nth-of-type(2){
           background-color: orange;
       }

注意：以上这些伪类是根据同类型的子元素中去选择

3.2否定伪类伪类选择器

:not() 否定伪类
             -将复合条件的元素从选择器中去除    

li:not(:nth-of-type(3)){
           font-size: 30px;
       }