css选择器

1.CSS选择器常见的有几种?

• 基础选择器

* {
    font-family: '微软雅黑';
}

#id-selector{
    color: #333;
}

.class-selector{
    background: #f1f1f1;
}

p {
    height: 50px;
    line-height: 50px;
}

• 组合选择器

• 属性选择器
  属性选择器可以根据某个属性是否存在或属性的值寻找元素，以此来实现功能
  例如：input[type='text']，设置input标签的样式，不用另外增加class名

• 伪类选择器
  有时候，我们需要根据文档结构之外的其他条件对元素应用样式，例如表单元素或链接的状态，此时使用伪类选择器完成

• 伪元素选择器

伪类和伪元素的根本区别在于：它们是否创造了新的元素(抽象)。从我们模仿其意义的角度来看，如果需要添加新元素加以标识的，就是伪元素，反之，如果只需要在既有元素上添加类别的，就是伪类。而这也是为什么，标准精确地使用 “create” 一词来解释伪元素，而使用 “classify” 一词来解释伪类的原因。一个描述的是新创建出来的“幽灵”元素，另一个则是描述已经存在的符合“幽灵”类别的元素。

伪类一开始单单只是用来表示一些元素的动态状态，典型的就是链接的各个状态(LVHA)。随后CSS2标准扩展了其概念范围，使其成为了所有逻辑上存在但在文档树中却无须标识的“幽灵”分类。
伪元素则代表了某个元素的子元素，这个子元素虽然在逻辑上存在，但却并不实际存在于文档树中。

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

具有更特殊选择器的规则优先于具有一般选择器的规则，如果两个规则特殊性相同，那么后定义的规则优先。

• 从高到低分别是
  1.在属性后面使用!important会覆盖页面内任何位置定义的元素样式
  2.作为style属性写在元素标签上的内联样式
  3.id选择器
  4.类选择器
  5.伪类选择器
  6.属性选择器
  7.标签选择器
  8.通配符选择器
  9.浏览器自定义

3.class 和 id 的使用场景?

使用class标签标示页面类型，使用ID标示特定页面，可以灵活控制站点的设计和布局

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

主要是为了使自己定义的样式只对当前区块生效，避免与他人产生冲突

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

1.#header{} ——选取id=header的标签为其添加样式
2..header{}——选取class=header的标签为其添加样式
3..header .logo{}——选取class=header的标签后代中 class="logo"的标签为其添加样式
4..header.mobile{}——选择class=header和mobile的元素
5..header p, .header h3{}——选择class=header标签中后代为p和h3的元素
6.#header .nav>li{}——选取id=header的元素后代中class为nav元素的直接后代li元素
7.#header a:hover{}——选取id=header的元素后代中a元素为其添加鼠标悬停时的样式.

6.列出你知道的伪类选择器

E:first-child ——匹配元素E的第一个子元素
E:link ——匹配所有未被点击的链接
E:visited ——匹配所有已被点击的链接
E:active ——匹配鼠标已经其上按下、还没有释放的E元素
E:hover ——匹配鼠标悬停其上的E元素
E:focus ——匹配获得当前焦点的E元素
E:checked ——匹配表单中被选中的radio或checkbox元素
E:first-of-type ——匹配父元素下使用同种标签的第一个子元素，等同于:nth-of-type(1)
E:last-of-type ——匹配父元素下使用同种标签的最后一个子元素，等同于:nth-last-of-type(1)

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

• :first-child匹配的是某父元素的第一个子元素，可以说是结构上的第一个子元素,示例中显示，即使是嵌套关系下的第一个子元素，也是会被匹配。
• :first-of-type匹配的是某父元素下相同类型子元素中的第一个，不限制是第一个子元素，只要是该类型元素的第一个就可以。

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

<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>

输出结果如上图
.item1:first-child匹配父元素的第一个子元素，即p标签，aa样式变为红色
.item1:first-of-type匹配父元素的第一个类型元素，p标签和第一个h3标签都被修改了样式，加上蓝色的背景颜色，第二个h3标签没有改变

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

text-align: center——让块级元素内部的行内元素（如文本和图片）水平居中。

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

在caniuse上查看