CSS選擇器是一種用于匹配HTML文檔中元素的模式。關(guān)聯(lián)的樣式規(guī)則將應(yīng)用于與選擇器模式匹配的元素。

創(chuàng)新互聯(lián)專注于恩平企業(yè)網(wǎng)站建設(shè),自適應(yīng)網(wǎng)站建設(shè),商城開發(fā)。恩平網(wǎng)站建設(shè)公司,為恩平等地區(qū)提供建站服務(wù)。全流程定制網(wǎng)站制作，專業(yè)設(shè)計，全程項目跟蹤，創(chuàng)新互聯(lián)專業(yè)和態(tài)度為您提供的服務(wù)

一、什么是選擇器?

選擇器是CSS最重要的方面之一，因為它們用于選擇網(wǎng)頁上的元素，以便可以設(shè)置樣式。可以通過多種方式定義選擇器。

二、通用選擇器

通用選擇器(用 * 星號或星號表示)與頁面上的每個單個元素匹配。如果目標(biāo)元素上存在其他條件，則可以省略通用選擇器。此選擇器通常用于從元素中刪除默認(rèn)的邊距和填充，以進(jìn)行快速測試。

例：

 
 
 
 

  
  
  
  
 
  
  
  
  
 
  
  
  
  
     
  
  
  
  
         
  
  
  
  
         
  
  
  
  
         
  
  
  
  
     
  
  
  
  
     
  
  
  
  
        
This is heading
 
  
  
  
  
        
This is a paragraph.
 
  
  
  
  
     
  
  
  
  
 
 
 
 
 

*選擇器內(nèi)的樣式規(guī)則將應(yīng)用于文檔中的每個元素。

注意：

不建議* 在生產(chǎn)環(huán)境中使用通用選擇器，因為此選擇器會匹配頁面上的每個元素，這會對瀏覽器造成不必要的壓力。

三、元素類型選擇器

元素類型選擇器將文檔樹中元素的每個例：與相應(yīng)的元素類型名稱進(jìn)行匹配。

例：

p選擇器中的樣式規(guī)則將應(yīng)用于

文檔中的每個元素，并使其顏色為藍(lán)色，無論它們在文檔樹中的位置如何。

1. ID選擇器

id選擇器用于為單個或唯一元素定義樣式規(guī)則，ID選擇器的定義是一個井號(#)，后跟ID值。

例：

此樣式規(guī)則將id屬性設(shè)置為的元素文本呈現(xiàn)為紅色error。

2. class類選擇器

類選擇器可用于選擇具有class屬性的任何HTML元素。具有該類的所有元素將根據(jù)定義的規(guī)則進(jìn)行格式化。

用一個句號(.)緊隨其后的類值定義類選擇器。

例：

以上樣式規(guī)則將 class 屬性中設(shè)置為的文檔中每個元素的文本顯示為藍(lán)色blue。可以使其更加具體。

例：

 
 
 
 

  
  
  
  
p.blue { 
  
  
  
  
    color: blue; 
  
  
  
  
    } 
 
 
 
 

選擇器中的樣式規(guī)則p.blue僅

將class屬性設(shè)置為的那些元素呈現(xiàn)為藍(lán)色blue，而對其他段落沒有影響。

2.1 后代選擇器

當(dāng)需要選擇一個元素是另一個元素的后代時，可以使用這些選擇器。例如，如果只想定位無序列表中包含的那些定位點(diǎn)，而不要定位所有定位點(diǎn)元素。

例：

注：

選擇器內(nèi)的樣式規(guī)則ul.menu li a僅適用于包含在具有class 的無序列表內(nèi)的那些即錨元素.menu，并且對文檔內(nèi)的其他鏈接沒有影響。

同樣，h1 em 選擇器內(nèi)的樣式規(guī)則僅適用于heading內(nèi)包含的元素。

2.2 子選擇器

子選擇器只能用于選擇作為某些元素的直接子元素的那些元素。子選擇器由兩個或多個選擇器組成，兩個選擇器之間用大于號(即>)隔開。例如，可以使用這些選擇器在具有多個級別的嵌套列表中選擇列表元素的第一級。

例：

選擇器內(nèi)的樣式規(guī)則ul > li僅適用于