1.CSS选择器常见的有几种?
<ol>
<li>id选择器
#div1{ }
<li>class选择器
<li>属性选择器
{
} ```
<li>分组选择器 （节省代码）
``<style>
h1,p1{
color:red;
}
</style>``
<li>派生选择器（子元素选择器）</li>
```<html><style>
mod-box h1 {
color:red;
}
</style>
让mod-box里的h1变色，外面的h1不变，选择mod-box中所有的h1``
``<style>
mod-box > h1 {
color:red;
}
</style>
让mod-box里的h1变色，但是只在这一层级，若是里面再有一层则不选择</html>```
***
##2.选择器的优先级是怎样的？
在属性后面使用 !important
会覆盖页面内任何位置定义的元素样式
作为style属性写在元素标签上的内联样式
1.id选择器
2.类选择器
3.伪类选择器
4.属性选择器
5.标签选择器
6.通配符选择器
7.浏览器自定义
在一些复杂的情况下，我们会依靠权重计算。id选择器的权值为1000，class选择器为100，标签选择器为10，如果两个选择器权值相同则后面的样式覆盖前面的样式，例如写了两个相同的class，给color定义了不同的颜色，会采用后面的class。
***
##3.class 和 id 的使用场景是什么?
id具有唯一性，一个页面只能使用一次，优先级较高。
class可以普遍使用，把一些特定样式放到一个class类中，需要此样式的标签，可以在添加此类。
***
##4.使用CSS选择器时为什么要划定适当的命名空间？
1.提高代码可读性；
2.便于维护管理；
3.保持代码的可拓展性；
4.避免结构冲突。
***
##5. 以下选择器分别是什么意思?
```<html>
#header{ /*id选择器，定义header的样式*/
}
.header{/*class选择器，定义header下所有class的样式*/
}
.header .logo{ /*定义header下logo的样式*/
}
.header.mobile{/*定义同时有header和mobile元素的样式*/
}
.header p, .header h3{/*定义header下p的样式和header下h3的样式*/
}
#header .nav>li{/*定义header下 nav里li同层级的样式*/
}
#header a:hover{/*定义id header中a链接的伪类*/
}```
***
##6.列出部分伪类选择器
<ul><li>E:first-child 匹配元素E的第一个子元素
<li>E:active 匹配鼠标已经其上按下、还没有释放的E元素
<li>E:hover 匹配鼠标悬停其上的E元素
<li>E:hover 匹配鼠标悬停其上的E元素
<li>E:disabled 匹配表单中禁用的元素
<li>E:checked 匹配表单中被选中的radio或checkbox元素
<li>E:nth-child(n) 匹配其父元素的第n个子元素，第一个编号为1
<li>E:first-of-type 匹配父元素下使用同种标签的第一个子元素，等同于:nth-of-type(1)
<li>E:last-of-type 匹配父元素下使用同种标签的最后一个子元素，等同于:nth-last-of-type(1)</li></ul>
***
##7.:first-child和:first-of-type的作用和区别
<ul><li>:first-child选择器是css2中定义的选择器，从字面意思上来看也很好理解，就是第一个子元素。比如有段代码：
p:first-child 匹配到的是p元素,因为p元素是div的第一个子元素；
h1:first-child 匹配不到任何元素，因为在这里h1是div的第二个子元素，而不是第一个；
span:first-child 匹配不到任何元素，因为在这里两个span元素都不是div的第一个子元素；
<li>:first-of-type是css3中的选择器，相同的一段代码：
p:first-of-type 匹配到的是p元素,因为p是div的所有类型为p的子元素中的第一个；
h1:first-of-type 匹配到的是h1元素，因为h1是div的所有类型为h1的子元素中的第一个；
span:first-of-type 匹配到的是第三个子元素span。这里div有两个为span的子元素，匹配到的是它们中的第一个。
所以，可以得出结论：
**:first-child** 匹配的是某父元素的第一个子元素，可以说是结构上的第一个子元素。
**:first-of-type** 匹配的是某父元素下相同类型子元素中的第一个，比如 p:first-of-type，就是指所有类型为p的子元素中的第一个。这里不再限制是第一个子元素了，只要是该类型元素的第一个就行了。
同样类型的选择器 :last-child 和 :last-of-type、:nth-child(n) 和 :nth-of-type(n) 也可以这样去理解。</ul>
***
##8.运行如下代码，解析下输出样式的原因。
第一行的aa显示为红色，是因为``<p class="item1">aa</p>``这行代码是``<div class="ct">``这个类中的第一个元素，所以
`` .item1:first-child {color: red;}``对其起作用。
"aa"和"bb"背景色为蓝色，因为它们分别是"p"和"h3"的第一个元素，而"cc"是h3的第二个元素，所以此元素没有背景色效果。
***
##9.text-align: center的作用是什么，作用在什么元素上？能让什么元素水平居中
text-align: center
作用是使元素水平居中，作用在块级元素上，让块级元素内部的行内元素水平居中。
一般用在标题里 如： ``<h1 style="text-align:center>标题</h1>``
***
##10.如果遇到一个属性想知道兼容性，在哪查看?
使用<a href="http://caniuse.com/">Caniuse</a>查询
***
**本文版权归本人和饥人谷所有，转载请注明来源**
网友评论