-
class 和 id 的使用场景?
class:选择同一类的元素
id：需要表示这个元素独一无二的时候
-
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;
-
选择器的优先级是怎样的?对于复杂场景如何计算优先级？
!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标签的背景色为蓝色，所以出现以上情况。
**严禁转载，违者必究！
