做網(wǎng)頁設(shè)計(jì)中如何選擇第一個(gè)元素

  • 2018-08-10 23:43:34
  • 閱讀次數(shù):
  • 作者:盈嵐科技小編
  • 來源:http://m.supportcoffeeroasters.com

另一個(gè)靜態(tài)偽類:first-child來選擇元素的第一個(gè)子元素。這個(gè)特定偽類很容易遭到誤解,所以有必要舉個(gè)例子來說明??紤]以下標(biāo)記:

<div>

<p>These are the necessary steps:</p>

<ul>

<li>Insert key</li>

<li>Turn key <strong>clockwise</strong></li>

<li>Push accelerator</li>

</ul>

<p> Do <em>not</em> push the brake at the same time as the accelerator.

</p>

<div>

在這個(gè)例子中,作為第一個(gè)子元素的元素包括第一個(gè)p、第一個(gè)li和strong及em元素。給定以下兩個(gè)規(guī)則:

p:first-child {font-weight: bold;}

li:first-child {text-transform: uppercase;}

前一個(gè)規(guī)則將作為某元素第一個(gè)子元素的所有P元素設(shè)置為粗體。第二個(gè)規(guī)則將作為某個(gè)元素(在制作網(wǎng)頁HTML中,這肯定是一個(gè)ol或ul元素)第一個(gè)子元素的所有l(wèi)i元素變成大寫。

最常見的錯(cuò)誤是認(rèn)為p:first-child之類的選擇器會(huì)選擇p元素的第一個(gè)子元素。不過,要記住偽類的實(shí)質(zhì),它是把某種幻像類關(guān)聯(lián)到與偽類相關(guān)的元素。如果要向標(biāo)記增加具體類,可能如下所示:

<div>

<p class="first-child">These are the necessary steps:</p>

<li class="first-child">Insert key</li>

<li>Turn key <strong class='first-child">clockwise</strongx/li>

<li>Push accelerator</li>

</ul>

<p> Do <em class="first-child">not</em> push the brake at the same time as the accelerator.

</p>

</div>

因此,如果想選擇作為某元素第一個(gè)子元素的em元素,應(yīng)當(dāng)寫作em:first-child。這個(gè)選擇器才能真正達(dá)到你的目的,例如,對(duì)列表中的第一項(xiàng)、div中的第一段或表行中的第一個(gè)td應(yīng)用樣式。

警告:windows平臺(tái)的Internet Explorer在IE6之前不支持:first-child,不過IE7支持。


當(dāng)前文章標(biāo)題:做網(wǎng)頁設(shè)計(jì)中如何選擇第一個(gè)元素

當(dāng)前URL:http://m.supportcoffeeroasters.com/news/wzzz/choose-css-first-child.html

上一篇:什么是動(dòng)態(tài)偽類

下一篇:設(shè)置網(wǎng)頁設(shè)計(jì)中的首字母和第一行樣式

網(wǎng)站建設(shè)、網(wǎng)絡(luò)營銷咨詢專線:181-8386-5875(點(diǎn)擊可一鍵撥號(hào))