css中的选择器

• 基类选择器
• 复合选择器
• 关系选择器
• 属性选择器
• 伪类选择器

1.基类选择器

元素选择器（选择元素） 例如：p{color:black;}

ID选择器（#号+ID名） 例如：#csdn{color:black;}

类选择器（.+class名） 例如：.a{color:black;}

通配符选择器（选择全部元素）例如：* {color：black}

2.复合选择器：1>交集选择器“.” 作用：选中同时复合多个条件的元素 语法：选择器1.选择器2.选择器3 注意点：交集选择器中如果有元素选择器必须以元素选择器开头 2> 并集选择器“,” 作用：同时选中多个选择器对应的元素 语法：选择器1,选择器2,选择器3

3.关系选择器：

后代选择器，用空格表示 div span{color: chartreuse; }

父子选择器>，只能是自己的第一个后代 div.box>span{ color: blue;}

选择下一个兄弟的选择器‘+‘：前一个+下一个必须紧挨着，中间不能隔着东西 p+span{color: red}

所有兄弟都可以 div.p~span{color: burlywood}

4, 属性选择器

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

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

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

[属性名&=属性值]选择属性值以指定值结尾的元素

[属性名*=属性值]选择属性值中包含某值的元素的元素

5.伪类选择器和伪元素

 伪元素:用::连接，具体如下所示

   <p>Mother remarried again， and Bob was a wonderful， kind man. I was twenty now and no longer living at home， but I felt a great love and attachment for him.</p>
 p::before        {   /*在首字母前面假如content，并且把content变成红色*/
   content: '[';       
   color:red;        }       
 p::first-letter{            /*把首字母颜色变成tan*/
 color: tan;            
   font-size: larger;        } 
 p::first-line{     /*改变第一行的颜色为turquoise*/
           color: turquoise;
}      
 p::after{           /*在最后一个字母后面加入content，并且把content变成turquoise的颜色*/
     content: ']';         
        color: turquoise;        }      
  p::selection        {        鼠标选中的部分变色    color: royalblue;        }
 

伪类选择器:

/*ul的子类li的第一个孩子变成红色*/
 ul>li:first-child   {       color: red;   }   

/*ul的子类的li除了第四个孩子其他孩子都变成saddlebrown色*/
 ul>li:nth-child(4){       color: saddlebrown;   }   
 /* 所有孩子中最后一个并且要是li */
 ul>li:last-child{       color: seashell;   }  
  /* li类中最后一个 */
  ul>li:last-of-type{       color:silver;   } 
    /* 除了第三个其余都变色 */ 
  ul>li:not(:nth-child(3))   {       color: skyblue;   }