CSS选择器常见的有几种?

1.基础选择器

基础选择器.png

2.组合选择器

组合选择器.png

3.属性选择器

属性选择器.png

4.伪类选择器

伪类选择器.png

5.伪元素选择器

结合各类选择器可以实现一个自己的小型组件库：

小型组件库.png

选择器的优先级是怎样的?

1. 在属性后面使用!important
2. 作为style属性卸载元素标签的内联样式
3. id选择器
4. 类选择器
5. 伪类选择器
6. 属性选择器
7. 标签选择器
8. 通配符选择器
9. 浏览器自定义

在一些复杂的情况下，我们会依靠权重计算。
id选择器的权值为1000，class选择器为100，标签选择器为10，如果两个选择器权值相同则后面的样式覆盖前面的样式。

class 和 id 的使用场景?

class使用场景：默写需要特定样式的标签放在同一个class中，需要这一样式的标签则可以在标签上添加此类。
id使用场景：根据提供的唯一id号，快速获取标签对象，用于充当label标签for属性的值。

使用CSS选择器时为什么要划定适当的命名空间？

1. 提高代码的可读性
2. 便于管理维护
3. 保持代码的拓展性

以下选择器分别是什么意思?

#header{
  /*id选择器*/
}
.header{
 /*类选择器*/
}
.header .logo{
  /*类选择器.header的后类.logo*/
}
.header.mobile{
  /*同时满足.header和.mobile类*/
}
.header p, .header h3{
  /*.header中的标签p和.header中的标签h3*/
}
#header .nav>li{
  /*id选择器header的后类选择器nav的直接子元素li*/
}
#header a:hover{
  /*id选择器header的后标签a的hover伪类*/
}

列出你知道的伪类选择器

E:hover
E:active
E:link
E:visited
E:focus
E:first-child
E:first-of-type
E:nth-child(n)
E:nth-of-type(n)
E:last-child
E:last-of-type
E:nth-last-child(n)
E:nth-last-of-type(n)

:first-child和:first-of-type的作用和区别?

E:first-child和E:first-of-type的区别：

• first-child匹配的是某个父元素的第一个子元素，可以说是结构上的第一个子元素。
• first-of-type匹配的是某父元素相同类型子元素的第一个，比如p:first-of-type，就是只所有类型为p的子元素的第一个，这里不再限制是第一个子元素了，只要是该类型元素的第一个就行了。

first-child和first-of-type.png

运行如下代码，解析下输出样式的原因。

<style>
.item1:first-child{
  color: red;
}
.item1:first-of-type{
  background: blue;
}
</style>
 <div class="ct">
   <p class="item1">aa</p>
   <h3 class="item1">bb</h3>
   <h3 class="item1">ccc</h3>
</div>

代码示例.png

.item1:first-child{
  color: red;
}

这段代码的作用是.item1会根据父元素的伪类first-child选择第一个直接子元素，确定了第一个子元素<p>所以aa变成红色。

.item1:first-of-type{
  background: blue;
}

这段代码.item1会根据父元素的伪类first-of-type选择相同类型的子元素，当遇见第一个标签<p>时，该标签是这一类元素的第一个子元素，所以其北京元素会编程蓝色。而遇到标签<h3>时，该标签又是该类标签的第一个子元素，所以其背景色也编程蓝色，而在往下的cc不是该组标签的第一个子元素，所以无变化。

text-align:center的作用是什么，作用在什么元素上？能让什么元素水平居中？

作用是让内联元素对象在块级元素中居中，主要是让内联元素居中。在有固定宽度的块级元素中，也可以通过设置margin:0 auto让块级元素居中。

text-align.png

如果遇到一个属性想知道兼容性，在哪查看?

在can i use中查看。