总结css选择器

css选择器

根据不同需求把不同的标签选出来，即选择标签使用的，主要分为基础选择器、复合选择器

1.基础选择器

• 标签选择器
  

标签名{
    属性1:属性值1;
    属性2:属性值2;
    属性3:属性值3;
    ···
}

• 类选择器
  

    .class（类名）{
		/*样式声明;*/
    }

• id选择器
  

    #id{
		/*样式声明;*/
    }

• 通配符选择器（*表示选择所有元素）
  

*{
	/*样式声明;*/
}

2.复合选择器

由两个或多个基础选择器通过不同方式组合而成

常用的复合选择器：

• 后代选择器（选择父元素里面的子元素，外层标签写在前面，内层标签写在后面，中间用空格隔开，当标签嵌套时，内层标签就是外层标签的后代）
  

 /*元素2为元素1的后代，选择的是元素2*/
元素1 元素2 {
   /*样式声明;*/
}

• 子（元素）选择器（只能选择作为某元素最近一级的子元素）
  

/* 选择元素1里面的所有直接后代（子元素）元素2*/
    元素1 > 元素2{
        /*样式声明;*/
    }
    /* 例如，选择div里面所有最近一级的p元素*/
    div > p {
        /*样式声明;*/
    }

• 并集选择器（选择多组标签，同时为他们定义相同的样式，通常用于集体声明）
  

    元素1, 元素2 {
        /*样式声明;*/
    }
    /* 例如，选择所有的div元素和p元素，定义相同的样式，元素之间用逗号隔开*/
    div, p {
        /*样式声明;*/
    }

• 伪类选择器（对某些选择器添加特殊的效果，比如给链接添加特殊效果或选择第1个、第n个元素；书写特点就是用冒号（:）表示，如:hover,:first-child。）
  
• 链接伪类选择器
  

    a:link   /*选择所有未被访问的链接*/
    a:visited /*选择所有已被访问过的链接*/
    a:hover   /*选择鼠标悬浮在上面的链接*/
    a:active  /*选择被激活的链接（鼠标按下未弹起的链接）*/

注意：链接伪类选择器时，为了确保生效，按照LVHA顺序声明

:link -> :visited -> :hover -> active

链接伪类在实际开发中的写法：

    /*a是标签选择器  所有的链接*/
    a {
        color: gray;
    }
    /*:hover是链接伪类选择器 鼠标经过*/
    a:hover {
        color: red; /*鼠标经过的时候，由灰色变成了红色*/
    }

• :focus伪类选择器（用于选取获得焦点的表单元素）
  
  一般情况下，input表单元素才能获取，因此这个选择器也主要针对于表单元素来说。
  

    input:focus {
        background-color:yellow;
    }