在CSS樣式設(shè)計(jì)中，子元素是經(jīng)常用到的元素之一，實(shí)際上，CSS樣式規(guī)則的第一級(jí)子元素也是一個(gè)非常有用的功能。那么，何為CSS樣式規(guī)則的第一級(jí)子元素呢？

selector >selector {
property: value;
}

可以看到，這種CSS樣式規(guī)則指定了一個(gè)前面的元素選擇器，后面跟一個(gè)大于符號(hào)(>)，再跟一個(gè)后面的元素選擇器。這種規(guī)則就是限定選擇第一級(jí)子元素的樣式規(guī)則。

我們可以將該規(guī)則簡(jiǎn)單理解為：選擇器選擇這樣的元素，它是指定父元素的第一級(jí)子元素；而右側(cè)的選擇器聲明了任何正確的屬性/值對(duì)。

body >h1 {
color: red;
}

上面的例子就說明只有第一級(jí)子元素h1才會(huì)被設(shè)為紅色，而下一級(jí)元素則不會(huì)受到影響。舉個(gè)例子，如果我們想將一個(gè)ul中的li元素設(shè)為紅色，而ul下的級(jí)別想保持顏色不變(黑色)，就可以借助該功能實(shí)現(xiàn)。

ul >li {
color: red;
}

如此便實(shí)現(xiàn)了只有ul內(nèi)部的li元素才是設(shè)為紅色，而不包括其它級(jí)別的li元素的功能。

總結(jié)來說，CSS樣式規(guī)則的第一級(jí)子元素是一個(gè)功能強(qiáng)大的特性，允許我們指定僅對(duì)指定父元素的第一級(jí)子元素生效的樣式。這對(duì)于我們完成頁(yè)面布局和導(dǎo)航等任務(wù)非常有用。