问答

---

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

答：

• 基础选择器

#id id选择器，匹配特定id的元素
.class class选择器，匹配包含class类名的元素
* 通配符选择器，匹配了页面任何元素
element 标签选择器，匹配页面元素标签

• 组合选择器

E,F 分组选择器，可以设置E和F相同的样式
E F 后代选择器，设置E元素后的所有F元素的样式
E>F 子元素选择器，可以设置E元素后直接的F元素样式
E+F 近邻元素选择器，可以设置E元素后近邻的F元素样式
E~F 相邻元素选择器，可以设置E元素后同邻的F元素样式

• 属性选择器（大多数用于匹配表单的空间元素，可以不用反复添加样式来匹配）

E[attr=value] 设置属性attr是value的元素样式

• 伪类选择器

E:hover 改变E元素的悬停效果

• 伪元素选择器

E::before 在E元素之前插入生成的元素
E::after 在E元素之后插入生成的元素

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

答：

优先级从高到低排列

• !import
• style属性
• id选择器
• class选择器
• 伪类选择器
• 属性选择器
• 标签选择器
• 通配符
• 浏览器自定义
  注： 优先级相同的情况下，后面的样式优先于之前的设置。

3. class 和 id 的使用场景?

答：

• class 的类名用于同一类型并且拥有共同特性的模块，同一个元素可以拥有多个class 类名
• id 拥有独一无二的样式，用于划分大区块

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

答：

• 应用于展现网页整体的清晰结构，便于开发者阅读与重构

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

答：

header{}

.header{}
.header .logo{}
.header.mobile{}
.header p, .header h3{}

header .nav>li{}

header a:hover{}

* ```#header``` 设置```id="header"``` 的元素样式
* ```.header``` 设置```class="header"``` 的元素样式
* ```.header .logo``` 设置```class="header"```元素下拥有```class="logo"``` 的元素样式
* ```.header.mobile``` 设置```class="header mobile"``` 的元素样式
* ```.header p, .header h3{}``` 同时设置```class="header"``` 下的```p``` 元素和```h3``` 元素样式
* ```#header .nav>li{}``` 设置```id="header"``` 下```class="nav"```的子元素```li``` 的元素样式（而非后代元素）
* ```#header a:hover``` 设置```id="header"``` 下```a``` 元素的鼠标悬停效果

### 6. 列出你知道的伪类选择器
#### 答：
* ```
E:hover // 鼠标悬停状态
E:active // 鼠标按下没有释放的状态
E:focus // 获得焦点的状态
E:empty // 匹配一个不包含任何子元素的元素
E:checked // 匹配表单中被默认选中的radio或checkbox元素
E:first-child // 匹配父元素中的第一个子元素E，如果没有找到，设置样式就无效。
E:first-of-type // 匹配父元素中相同类型元素E的第一个子元素

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

答：

• :first-child 是匹配父元素中的第一个子元素，如果没有找到，设置的样式就无效。

<style>
        p:first-child{
                color: blue;
        }
        h1:first-child{
                color: blue;
        }
        span:first-child{
                color: blue;
        }
</style>
<div>
        <!-- 这样设置的p元素的字体颜色显示蓝色，其他设置无效，因为h1和span不是父元素的第一个子元素-->
        <p>我是第一个P元素</p>
        <h1>我是第一个h1元素</h1>
        <span>我是第一个span元素</span>
</div>

预览代码

• :first-of-type 是匹配父元素中相同类型的第一个子元素，并不一定是父元素中的第一个子元素。

<style>
        p:first-of-type{
                color: blue;
        }
        h1:first-of-type{
                color: blue;
        }
        span:first-of-type{
                color: blue;
        }
</style>
<div>
        <!-- 这样设置的p,h1,span元素的字体颜色都显示蓝色-->
        <p>我是第一个P元素</p>
        <h1>我是第一个h1元素</h1>
        <span>我是第一个span元素</span>
</div>

预览代码

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 会找到 class="ct"的 div元素下的第一个子元素，所以p 标签下的aa的文字颜色为红色。
• .item1:first-of-type会找到class="ct"的div元素下的同类型元素的第一个子元素，所以p 和h3标签下的第一个子元素的背景色为蓝色，所以包含aa文本的p标签背景颜色为蓝色，包含bb文本的h3标签背景颜色为蓝色。

预览代码

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

答：

• 作用于块级元素，语义上是让文本显示居中，实际运用中，可以让块级元素中的内联元素水平居中。

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

答：

• 可以通过caniuse网站查询CSS属性兼容性