#CSS选择器

1. class 和 id 的使用场景?
   class:选择同一类的元素
   id：需要表示这个元素独一无二的时候
2. CSS选择器常见的有几种?
   五种：
   基础选择器：id选择器：#id{}；class选择器：.classname{};通用选择器{}；标签选择器 p；
   组合选择器：E+F； E~F； E>F；E,F;E F ,.classname1.classname2;element#id(不太用)
   属性选择器：E:[attr];E:[attr=value]（含有）;E:[attr~=value]（含有）;E:[attr^=value]（开头）;E:[attr$=value]（结尾）;E:[attr*=value]（其中）
   伪类选择器：E:active等
   伪元素选择器：E:first-letter;E:first-line;E:before;E:after;
3. 选择器的优先级是怎样的?对于复杂场景如何计算优先级？
   !import 最大
   内联样式
   id
   class
   伪类

属性
标签
通配符
浏览器自带
####计算：
将内联样式设置为a;
~~id，class设置为b;~~     **id设置为b**
~~属性为c；~~  **class，伪类，属性选择器为c**
~~标签为d;~~ **标签，伪元素为d**
然后将选择器字符拆分归类，按照”同级的，比大小“，”同级相同，下一级比大小“，”谁大听谁的“
4. **a:link, a:hover, a:active, a:visited 的顺序是怎样的？ 为什么？**
  a:link;
  a:visited;
  a:hover;
  a:active;
为什么？~~这个跟鼠标的工作工作有关系，当a设置成link时，其没有被访问过，然后我们将使用鼠标去打开a链接时，鼠标先是滑动到a链接上，然后在点击a链接。滑动到a链接时，使用hover；点击不放时，使用active；然后我们不是打开a连接了 嘛?visited则是工作，说明这个链接刚刚被打开过。~~其伪类会覆盖，浏览器规定。
5. **以下选择器分别是什么意思?**
       #header{
          }         
 表示选择了id=header的元素集合

        .header{
        }
  表示选择了classname=header的元素集合

        .header .logo{
        }
~~表示选择了classname=header&classname=logo的元素，要符合两个条件的原色~~
符合classname=header | classname=logo的元素被选择，符合其中某一条的条件，元素就被选择出来
        .header.mobile{
        }
~~选择了classname=header的元素内的classname=mobile这个子元素；即镶嵌在.header元素中的.mobile这个元素~~
选择classname=header&classname=mobile的元素集合
        .header p, .header h3{
       }
选择classname=header的元素内的p标签元素集合，h3标签元素集合，是选择出两个结果
         #header .nav>li{
        }
选择id=header&classname=nav的元素内的所有li标签元素集合，是直接相关的；即li元素是镶嵌在其中的
        #header a:hover{
        }
选择id=header 的a标签元素集合的划过状态
        #header .logo~p{
        }
选择id=header &classname=logo的元素内所有的p标签元素集合，对于p标签来说它是被嵌入这块区域的
        #header input[type="text"]{
      }
选择id=header 的input标签元素中的type=text属性的元素集合

6.  **列出你知道的伪类选择器**
        E:active
        E:visited
        E:hover
        E:link
     ~~~E:foucs~~
        E:focus
        E:first-child
        E:enabled /disabled
        E:checked
        E:selection


7. div:first-child和div:first-of-type的作用和区别
      div:first-child 伪类选择器，选择div标签元素中的第一个子元素,
div：fist-of-type~~~伪元素选择器·~~~
伪类选择器，
~~~选择div元素内的第一个的标签元素`~~~
在div的父元素下的第一个div标签元素
8. 运行如下代码，解析下输出样式的原因。
>http://js.jirengu.com/yocuk/1/edit?html,output
        原因：因为classname=item1的元素是被包裹在div这个元素中的，而first-child是匹配到了classname=ct
这个div父元素，在寻找在父元素中的第一个子元素，那就是p标签元素，然后color=red则p标签元素中的字变成red。同时由于first-of-type是匹配到div这个父元素的，则浏览器会选择**不同标签元素下的第一个标签元素，即div中有多个p标签和多个h3标签，浏览器就在div中按照自上而下的原则，选择第一个p标签和第一个h3标签**所以在本题中由于background=blue，则第一个p标签的背景色为蓝色，而两个h3标签中自上而下的第一个h3标签的背景色为蓝色，所以出现以上情况。
**严禁转载，违者必究！