CSS派生選擇器使用實(shí)例分析

今天小編給大家分享一下CSS派生選擇器使用實(shí)例分析的相關(guān)知識(shí)點(diǎn)，內(nèi)容詳細(xì)，邏輯清晰，相信大部分人都還太了解這方面的知識(shí)，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來(lái)了解一下吧。

CSS派生選擇器

通過(guò)依據(jù)元素在其位置的上下文關(guān)系來(lái)定義樣式，你可以使標(biāo)記更加簡(jiǎn)潔。

在CSS1中，通過(guò)這種方式來(lái)應(yīng)用規(guī)則的選擇器被稱為上下文選擇器(contextualselectors)，這是由于他們依賴于上下文關(guān)系來(lái)應(yīng)用或者避免某項(xiàng)規(guī)則。在CSS2中，它們稱為CSS派生選擇器，但是無(wú)論你如何稱呼它們，它們的作用都是相同的。

CSS派生選擇器允許你根據(jù)文檔的上下文關(guān)系來(lái)確定某個(gè)標(biāo)簽的樣式。通過(guò)合理地使用CSS派生選擇器，我們可以使HTML代碼變得更加整潔。

◆比方說(shuō)，你希望列表中的strong元素變?yōu)樾斌w字，而不是通常的粗體字，可以這樣定義一個(gè)CSS派生選擇器：

listrong{   font-style:italic;   font-weight:normal;  }

請(qǐng)注意標(biāo)記為<strong>的藍(lán)色代碼的上下文關(guān)系：

<p><strong>我是粗體字，不是斜體字，因?yàn)槲也辉诹斜懋?dāng)中，所以這個(gè)規(guī)則對(duì)我不起作用</strong></p> <ol>  <li><strong>我是斜體字。這是因?yàn)閟trong元素位于li元素內(nèi)。</strong></li>  <li>我是正常的字體。</li> </ol>

在上面的例子中，只有l(wèi)i元素中的strong元素的樣式為斜體字，無(wú)需為strong元素定義特別的class或id，代碼更加簡(jiǎn)潔。

◆再看看下面的CSS規(guī)則：

strong{   color:red;  }  h3{   color:red;  }  h3strong{   color:blue;  }

下面是它施加影響的HTML：

<p>Thestronglyemphasizedwordinthisparagraphis<strong>red</strong>.</p> <h3>Thissubheadisalsored.</h3> <h3>Thestronglyemphasizedwordinthissubheadis<strong>blue</strong>

以上就是“CSS派生選擇器使用實(shí)例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會(huì)為大家更新不同的知識(shí)，如果還想學(xué)習(xí)更多的知識(shí)，請(qǐng)關(guān)注億速云行業(yè)資訊頻道。