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

答：

• id选择器：选择设置ID的元素。

<style>
    #div1{
        color: #333;
    }
</style>
<div>div</div>
<div id="div1">div1</div>````
- class选择器：选择具有相同class的元素。

<style>
.c1{
color: red;
}
</style>
<div class="c1">c1</div>````

• 属性选择器：选择某一个属性。

<style>
    p{
       color:red;
      }
</style>
<p>这是段落</p>````
- 分组选择器：可以对选择器进行分组，被分组的选择器对应的元素就有相同的样式。 用逗号将需要分组的选择器分开。

<style>
h1,p{
color:red;
}
</style>

- 派生选择器：用来选择某个元素下的子元素。

<style>
.box h1{
color: red;
}
</style>
<h1>这是大标题</h1>
<div class="box">
<h1>这是box里的标题</h1>
</div>````

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

答：1.最高的！important。
2.<style>写在元素标签上的内联样式
3.id选择器
4.类选择器
5.伪类选择器
6.属性选择器
7.标签选择器
8.通配符选择器
9.浏览器自定义

3.class 和 id 的使用场景?

答：那些在页面中只会出现一次的元素应该用id来表示，比如较大的区块不会发生什么改变的地方。
需要重复使用多次的元素应该用class，而且可维护性很高你并不能肯定你的元素只会使用出现一次，以后万一发生什么改变也好做出改变，所以尽量使用class选择器。

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

答：让代码更容易让人读懂，方便日后代码的维护管理，提升工作效率。

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

• #header{}：对id="header"的元素设置属性。
• .header{}:对class="header"的元素设置属性。
• .header .logo{}：对class="header"元素下的logo元素设置属性。
• .header.mobile{}：class="header mobile"选中同时又header和Mobil两个class的元素
• .header p, .header h3{}：对class="header"下的p和h3设置属性。
• #header .nav>li{}：对id="header"下的nav下的直接子元素li设置属性。
• #header a:hover{}：对id="header"下的a链接鼠标经过时设置属性。

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

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

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

答：:first-child 匹配的是某父元素的第一个子元素，可以说是结构上的第一个子元素。
:first-of-type匹配是父元素下第一个该类型的子元素，这个第一个元素出现在哪就匹配到哪。而不是直接匹配第一个。

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

答：运行结果：代码
原因：红色字是因为first-child直接选择了后代的第一个样式为item1的元素<p>所以字体为红色。
蓝背景是因为first-of-type选择后代同等级标签的第一个样式为item1的背景为蓝色<p>只有一个所以为蓝色，第一个h3也会生效。

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

答：使块级元素里的行内元素水平居中。

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

答：在这个网站查看

本文版权归作者饥人谷_浩天和饥人谷所有，转载请注明来源