什麼是CSS後代選擇器？

HTML文檔的結構與家譜相似。 在你的家庭中，你有你的父母和其他人。 這些是你的祖先。 孩子和那些在樹上追隨你的人是你的後代。 HTML以類似的方式工作。 其他元素內的元素是它們的後代。 例如，由於幾乎每個HTML元素都在標記內，它們將是元素的後代。 這種關係對於了解何時開始使用CSS並需要定位特定元素以應用視覺樣式非常重要。

CSS後代選擇器

CSS後代選擇器應用於另一個元素內部的元素（或者更準確地說，一個元素是另一個元素的後代）。 例如，一個無序列表中有一個標籤，其標籤為後代。 我們以下面的HTML為例：

• 這是一個鏈接

  LI標籤是UL標籤的後代。 A標籤是LI（子代後代）和UL（孫代後代）標籤的後代。 如果你考慮使用族譜例子來考慮這個問題，那麼

  將是父對象，
  • 將是該元素的子對象，將是
  • 的子對象和
    。

    那麼，如何使用這些後代選擇器來定位網頁中的特定元素？ 首先，你必須使用兩個（或更多）類型選擇器來定義後代選擇器，這些選擇器之間用空格分隔。

    li a {text-decoration：none; }

    在該示例中，樣式僅適用於作為列表項元素（

    • ）的後代的鏈接元素（）。 頁面上不是列表項的後代的所有其他鏈接都不會獲得此樣式。

      需要記住的一件重要的事情是，它們可以在後代選擇器中使用的標籤之間有多少標籤並不重要。 如果第二個元素被封閉在第一個元素的任何地方，它將被選為後代。

      如果你想選擇ul元素後面的所有錨點，你可以這樣寫：

      ul a {text-decoration：none; }

      現在，這些樣式將應用於作為列表項的後代的任何鏈接。 你也可以寫這個選擇器

      ul li a {text-decoration：none; }

      這是使用多於兩個類型選擇器的後代選擇器。 在這種情況下，這將適用於作為列表項目並位於無序列表內部的鏈接。

      使用類選擇器和ID選擇器

      您從下降的選擇器不必始終是類型的後代。 例如，假設您擁有ID為“廣告牌”的網站區域（如分部）。 你可以設置一個後代選擇器，關閉該ID：

      #billboard ul {background-color：#ccc; }

      這將設置無序列表，該列表是ID為“廣告牌”的元素的後代。 你可以對類的值做同樣的事情。

      div.billboard ul {background-color：#ccc; }

      這假定該部門具有“廣告牌”的等級值。 上面的CSS可以設置具有此類值的任何分區內的

      元素。

      你可能會非常沉重，並且會對後代選擇器產生冗長的影響。 例如，如果您使用Dreamweaver編寫HTML代碼 ，則添加新的CSS規則時會有一個設置，這些規則將根據您在該頁面上放置光標自動創建選擇器。 在這種情況下， Dreamweaver所做的是創建一個非常詳細且冗長的後代選擇器。 對於你的CSS來說 ，這些特性並不是必須的。 你想要做的是找到一個足夠具體的後代選擇器之間的平衡，這樣你就可以深入到你需要的確切元素（沒有你不希望影響的元素的樣式），而沒有CSS選擇器過度的規則大。