CSS面試題是技術(shù)面試中非常重要的一部分，我們經(jīng)常會(huì)被問(wèn)到一些基本的CSS知識(shí)，例如層疊優(yōu)先級(jí)、盒模型等等。今天，我們想要向大家介紹一個(gè)非常有趣的CSS面試題，那就是“有個(gè)空軍”。

這個(gè)問(wèn)題的具體描述是這樣的：假設(shè)你有一只“空軍”，它由下面四個(gè)元素組成：

<div class="airforce">
<div class="airplane"></div>
<div class="airplane"></div>
<div class="airplane"></div>
<div class="airplane"></div>
</div>

其中，空軍外面的div元素有一個(gè)類名為“airforce”，它的內(nèi)部有四個(gè)類名為“airplane”的div元素。現(xiàn)在問(wèn)題來(lái)了，你需要使用CSS的樣式來(lái)實(shí)現(xiàn)以下效果：

• 空軍（airforce）的寬度是100px，高度也是100px；
• 四個(gè)飛機(jī)（airplane）在空軍內(nèi)部平均分布，每個(gè)飛機(jī)的寬度和高度都是25px；
• 四個(gè)飛機(jī)的背景顏色分別為紅色、黃色、綠色和藍(lán)色；
• 當(dāng)鼠標(biāo)懸停在空軍上時(shí)，空軍的邊框變?yōu)?px實(shí)線藍(lán)色。

.airforce {
width: 100px;
height: 100px;
border: 1px solid transparent;
}
.airforce:hover {
border: 1px solid blue;
}
.airplane {
width: 25px;
height: 25px;
display: inline-block;
}
.airplane:nth-child(1) {
background-color: red;
}
.airplane:nth-child(2) {
background-color: yellow;
}
.airplane:nth-child(3) {
background-color: green;
}
.airplane:nth-child(4) {
background-color: blue;
}

這個(gè)題目看起來(lái)非常簡(jiǎn)單，但實(shí)際上卻有幾個(gè)點(diǎn)需要注意。首先，需要使用display:inline-block讓四個(gè)飛機(jī)在一行上面平均分布；其次，需要使用:nth-child偽類來(lái)單獨(dú)設(shè)置每個(gè)飛機(jī)的背景顏色；最后，需要使用:hover偽類來(lái)實(shí)現(xiàn)當(dāng)鼠標(biāo)懸停在空軍上時(shí)的效果。

希望這個(gè)CSS面試題能夠?qū)Υ蠹矣兴鶐椭尨蠹以诿嬖嚨臅r(shí)候能夠順利通過(guò)技術(shù)面試，獲得心儀的工作機(jī)會(huì)。