2. 程式人生 > >CSS教程:1.4 複合選擇器

CSS教程:1.4 複合選擇器

阿新 • • 發佈：2018-12-26

上一節介紹了3種基本的選擇器，以這3種基本選擇器為基礎，通過組合，還可以產生更多種類的選擇器，實現更強、更方便的選擇功能，複合選擇器就是基本選擇器通過不同的連線方式構成的。

複合選擇器就是兩個或多個基本選擇器，通過不同方式連線而成的選擇器。

一、“交集”選擇器

“交集”複合選擇器由兩個選擇器直接連線構成，其結果是選中二者各自元素範圍的交集。其中第一個必須是標記選擇器，第二個必須是類別選擇器或者ID選擇器。這兩個選擇器之間不能有空格，必須連續書寫，形式如下示例所示。

這種方式構成的選擇器，將選中同時滿足前後二者定義的元素，也就是前者所定義的標記型別，並且指定了後者的類別或者id的元素，因此被稱為“交集”選擇器。

例如，聲明瞭p、.spccial、p.special這3種選擇器，它們的選擇範圍如下示例所示。

下面舉一個實際案例，示例檔案位於網頁學習網CSS教程資源中“第1章\09.htm”。

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  
  2.  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <htmlxmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5. <title>選擇器.class</title>
  6. <
    styletype="text/css">
  7. p{                      /* 標記選擇器 */  
  8.     color:blue;  
  9. }  
  10. p.special{              /* 標記.類別選擇器 */  
  11.     color:red;          /* 紅色 */  
  12. }  
  13. .special{               /* 類別選擇器 */  
  14.     color:green;  
  15. }  
  16. </style>
  17. </head>
  18. <body>
  19. <p>普通段落文字</p>
  20. <h3>普通標題文字</h3>
  21. <pclass
    ="special">指定了.special類別的段落文字</p>
  22. <h3class="special">指定了.special類別的標題文字</h3>
  23. </body>
  24. </html>

上面的程式碼中定義了<p>標記的樣式，也定義“.special”類別的樣式，此外還單獨定義了p.special．用於特殊的控制．而在這個p.special中定義的風格樣式僅僅適用於<p class="special">標記，而不會影響使用了.special的其他標記，顯示效果如圖1所示。

圖1 標記.類別選擇器示例
圖1 標記.類別選擇器示例

返回頂部

二、“並集”選擇器

與交集選擇器相對應，還有一種“並集”選擇器，它的結果是同時選中各個基本選擇器所選擇的範圍。任何形式的選擇器（包括標記選擇器、class類別選擇器、ID選擇器等）都可以作為並集選擇器的一部分。

並集選擇器是多個選擇器通過逗號連線而成的．在宣告各種CSS選擇器時，如果某些選擇器的風格是完全相同的，或者部分相同，這時便可以利用並集選擇器同時宣告風格相同的CSS選擇器。其效果如下示例所示。

下面舉一個實際案例，示例檔案位於網頁學習網CSS教程資源中“第1章\10.htm”。

  1. <html>
  2. <head>
  3. <title>並集選擇器</title>
  4. <styletype="text/css">
  5. h1, h2, h3, h4, h5, p{          /*並集選擇器*/  
  6.     color:purple;               /* 文字顏色 */  
  7.     font-size:15px;             /* 字型大小 */  
  8. }  
  9. h2.special, .special, #one{     /* 集體宣告 */  
  10.     text-decoration:underline;  /* 下劃線 */  
  11. }  
  12. </style>
  13. </head>
  14. <body>
  15. <h1>示例文字h1</h1>
  16. <h2class="special">示例文字h2</h2>
  17. <h3>示例文字h3</h3>
  18. <h4>示例文字h4</h4>
  19. <h5>示例文字h5</h5>
  20. <p>示例文字p1</p>
  21. <pclass="special">示例文字p2</p>
  22. <pid="one">示例文字p3</p>
  23. </body>
  24. </html>

其顯示效果如圖2所示，可以看到所有行的顏色都是紫色，而且字型大小均為15px。這種集體宣告的效果與單獨宣告的效果完全相同，h2.special、.special和#one的宣告並不影響前一個集體宣告，第2行和最後兩行在紫色和大小為15px的前提下使用了下劃線進行突出。

圖2 集體宣告
圖2 集體宣告

另外，對於實際網站中的一些頁面，例如彈出的小對話方塊和上傳附件的小視窗等，希望這些頁面中所有的標記都使用同一種CSS樣式，但又不希望逐個來宣告的情況，可以利用全域性選擇器“*”，如下例所示，示洌檔案位於網頁學習網CSS教程資源中“第1章\11.htm”。

  1. <html>
  2. <head>
  3. <title>全域性宣告</title>
  4. <styletype="text/css">
  5. *{                              /* 全域性宣告 */  
  6.     color:purple;               /* 文字顏色 */  
  7.     font-size:15px;             /* 字型大小 */  
  8. }  
  9. h2.special, .special, #one{     /* 集體宣告 */  
  10.     text-decoration:underline;  /* 下劃線 */  
  11. }  
  12. </style>
  13. </head>
  14. <body>
  15. <h1>全域性宣告h1</h1>
  16. <h2class="special">全域性宣告h2</h2>
  17. <h3>全域性宣告h3</h3>
  18. <h4>全域性宣告h4</h4>
  19. <h5>全域性宣告h5</h5>
  20. <p>全域性宣告p1</p>
  21. <pclass="special">全域性宣告p2</p>
  22. <pid="one">全域性宣告p3</p>
  23. </body>
  24. </html>

其效果和圖2類似，與前面案例的效果完全相同，程式碼卻大大縮減了。WANGYEXX.COM

返回頂部

三、後代選擇器

在CSS選擇器中，還可以通過巢狀的方式，對特殊位置的HTML標記進行宣告，例如當<p>與</p>之間包含<span></span>標記時，就可以使用後代選擇器進行相應的控制。後代選擇器的寫法就是把外層的標記寫在前面，內層的標記寫在後面，之間用空格分隔。當標記發生巢狀時，內層的標記就成為外層標記的後代。

例如，假設有下面的程式碼：

  1. <p>這是最外層的文字，<span>這是中間層的文字，<b>這是最內層的文字，</b></span></p>

最外層是<p>標記，裡面嵌套了<span>標記，<span>標記中又嵌套了<b>標記，則稱span是p的子元素，b是span的子元素。

下面舉一個完整的例子，具體程式碼如下所示，示洌檔案位於CSS教程資源中“第1章\12.htm”。

  1. <html>
  2. <head>
  3. <title>後代選擇器</title>
  4. <styletype="text/css">
  5. p span{                     /* 巢狀宣告 */  
  6.     color:red;              /* 顏色 */  
  7. }  
  8. span{  
  9.     color:blue;             /* 顏色 */  
  10. }  
  11. </style>
  12. </head>
  13. <body>
  14. <p>巢狀使<span>用CSS</span>標記的方法</p>
  15.     巢狀之外的<span>標記</span>不生效  
  16. </body>
  17. </html>

通過將span選擇器巢狀在p選擇器中進行宣告，顯示效果只適用於<p>和</p>之間的<span>標記，而其外的<span>標記並不產生任何效果，如圖3所示，只有第1行中<span>和</span>之間的文字變成了紅色，而第2行文字中<span>和</span>之間的文字的顏色則是按照第2條CSS樣式規則設定的，即為藍色。

圖3 巢狀選擇器
圖3 巢狀選擇器

後代選擇器的使用非常廣泛，不僅標記選擇器可以以這種方式組合，類別選擇器和ID選擇器都可以進行巢狀。下面是一些典型的語句：

  1. .special i{             /* 使用了屬性special的標記裡面的包含的i *//  
  2. color:red;            
  3. }  
  4. #one li{                /* ID為one的標記裡面包含的<li> */
  5. color:green;  
  6. }  
  7. td.top .top1 strong{    /* 多層巢狀，同樣使用 */
  8. color:blue;  
  9. } 

上面的第3行使用了3層巢狀，實際上更多層的巢狀在語法上都是允許的。上面的這個3層巢狀表示的就是使用了.top類別的<td>標記中包含的.top1類別的標記，其中又包含了<strong>標記，一種可能的相對成的HTML為：

  1. <tdclass="top">
  2. <p>
  3.         其他內容<strong>CSS控制內容</strong>其他內容  
  4. </p>
  5. </td>

經驗：選擇器的巢狀在CSS的縮寫中可以大大減少對class和id的宣告。因此在構建頁面HTML框架時通常只給外層標記（父標記）定義class或者id，內層標記（子標記）能通過巢狀表示的則利用巢狀的方式，而不需要再定義新的class或者專用id。只有當子標記無法利用此規則時，才單獨進行宣告，倒如一個<ul>標記中包含多個<li>標記，而需要對其中某個<li>單獨設定CSS樣式時才賦給該<li>一個單獨id或者類別，而其他<li>同樣採用“ul li{…}”的巢狀方式來設定。

需要注意的是，後代選擇器產生的影響不僅限於元素的“直接後代”，而且會影響倒它的“各級後代”。

例如，有如下的HTML結構：

  1. <p>這是最外層的文字，<span>這是中間層的文字，<b>這是最內層的文字，</b></span></p>

如果設定瞭如下CSS樣式：

  1. p span{  
  2. color:blue;  
  3. } 

那麼“這是最外層的文字”這幾個字將以黑色顯示，即沒有設定樣式的顏色；後面的“這是中間層的文字”和“這是最內層的文字”，都屬於它的後代，因此都會變成藍色。

因此在CSS 2中，規範的制定者還規定了一種複合選擇器。稱為“子選擇器”，也就是隻對直接後代有影響的選擇器，而對“孫子”以及多個層的後代不產生作用。WANGYEXX.COM

子選擇器和後代選擇的語法區別是，使用大於號連線。例如，將上面的css設定為：

  1. p>span{  
  2. color:blue; 
  3. }  

而IE 6中，不支援子選擇器，僅支援後代選擇。IE 7 IE 8和Firefox都既支援後代選擇器，也支援子選擇器。


相關推薦

CSS教程:1.4 複合選擇器

上一節介紹了3種基本的選擇器，以這3種基本選擇器為基礎，通過組合，還可以產生更多種類的選擇器，實現更強、更方便的選擇功能，複合選擇器就是基本選擇器通過不同的連線方式構成的。 複合選擇器就是兩個或多個基本選擇器，通過不同方式連線而成的選擇器。 一、“交集”選擇器 “交

Electron 基礎教程-1.4 為什麼選擇Electron

為什麼選擇Electron 既然你選擇了這本書，肯定是為了專案需求開發桌面應用，亦或是純粹的個人興趣。 如果你曾開發過web應用，你應該對適配各種瀏覽器平臺的痛苦歷歷在目。瀏覽器標準的適配過程經歷了很多年，但web開發者仍要關注適配問題。對於那些與企業客戶合

CSS--複合選擇器

CSS複合選擇器 複合選擇器是由兩個或多個基礎選擇器，通過不同的方式組合而成的,目的是為了可以選擇更準確更精細的目標元素標籤。 交集選擇器 交集選擇器由兩個選擇器構成，其中第一個為標籤選擇器，第二個為class選擇器或ID選擇器，兩個選擇器之間不能有空格. p.類名{

基本CSS選擇器,複合選擇器,後代選擇器

基本CSS選擇器有標記選擇器、類別選擇器、ID選擇器3種1。標記選擇器     每一種HTML標記的名稱都可以作為相應的標記選擇器的名稱，如h1,p,等等2。類別選擇器     類別選擇器的名稱可以由使用者自定義   格式如下：.class{color:green;font

006---css複合選擇器（交集選擇器，並集選擇器，後代選擇器，子元素選擇器，屬性選擇器，偽元素選擇器）

複合選擇器是由兩個或讀個基礎選擇器，通過不同的方式組合成的，目的是為了可以選擇更準確的目標元素。一、交集選擇器例如：<div class="orange">I am P1</div> <p class="orange">I am P2<

css複合選擇器的使用規則 及 css優先順序判定

css複合選擇器的使用規則 1、id巢狀class #myid.myclass：<p id="sp" class="myclass"></p>。 2、一個元素標籤使用多個class。.important.warning <p class="im

CSS學習——複合選擇器

目錄 CSS複合選擇器 複合選擇器是由兩個或多個基礎選擇器，通過不同的方式組合而成的，目的是為了可以選擇更準確更精細的目標元素標籤。 交集選擇器 交集選擇器由兩個選擇器構成，其中第一個為標籤選擇器，第二個為class選擇器，兩個選擇器之

css 的基本選擇器，複合選擇器，後代選擇器

基本CSS選擇器有標記選擇器、類別選擇器、ID選擇器3種1。標記選擇器    每一種HTML標記的名稱都可以作為相應的標記選擇器的名稱，如h1,p,等等2。類別選擇器    類別選擇器的名稱可以由使

CSS樣式之複合選擇器

1.交集選擇器 交集選擇器使用的方法是其中一個為HTML的標籤,另外一個是類選擇器,示例如下: p.one  解釋: p是HTML中的<p>標籤 , .one 是一個類選擇器的書寫方式,

css複合選擇器及總結

1. 後代選擇器 概念：後代選擇器又稱為包含選擇器。 作用：用來選擇元素或元素組的子孫後代。      其寫法就是把外層標籤寫在前面，內層標籤寫在後面，中間用空格分隔，先寫父親爺爺，在寫兒子孫子。 格式：父級 子級{屬性:屬性值;屬性:屬性值;}      語法

【CSS】複合選擇器

CSS基礎選擇器 基礎選擇器比較簡單，主要有標籤選擇器（元素選擇器），類選擇器，多類名選擇器，ID選擇器，萬用字元選擇器。以上都比較簡單，在這裡我們主要說一下複合選擇器 CSS複合選擇器 複合選擇器是由兩個或多個基礎選擇器，通過不同的方式組

HTML &CSS之複合選擇器中的交集選擇器、並集選擇器、後代選擇器、子元素選擇器、相鄰兄弟選擇器、屬性選擇器

複合選擇器是通過基本選擇器進行組合後構成的，常用的複合選擇器有：交集選擇器、並集選擇器、後代選擇器、子元素選擇器、相鄰兄弟選擇器和屬性選擇器等。 1. 交集選擇器 交集選擇器由兩個選擇器直接構成

CSS JQUERY的幾種複合選擇器

A B：後代選擇器 AB：交集選擇器 A ,B：並集選擇器 A > B：A中子元素是B 選擇器 A ~ B：A後面所有B兄弟元素 選擇器 A + B：A後面下一個B元素 選擇器 jQuery 選擇器 選擇器 例項 選取 * $

Web前端學習筆記——CSS樣式、外觀、複合選擇器

CSS字型樣式屬性 font-size:字號大小 font-size屬性用於設定字號，該屬性的值可以使用相對長度單位，也可以使用絕對長度單位。其中，相對長度單位比較常用，推薦使用畫素單位px，絕對長度單位使用較少。具體如下： font-family:字型 fo

五、css複合選擇器

交集選擇器 交集選擇器由兩個選擇器構成，其中第一個為標籤選擇器，第二個為class選擇器，兩個選擇器之間不能有空格，如div.classname1 並集選擇器 各個選擇器通過逗號連線而成的。 div,p,.classname1,#id1{width:

CSS之萬用字元選擇器、複合選擇器

一、萬用字元選擇器 1、 2、 執行結果：作用於所有的標籤，所有文字顏色都變成了紅色 二、符合選擇器 1、複合選擇器就是把上面的幾個單獨的基本選擇器混合來使用 2、 ① ② 3、 4、 ② ③ 5、 ① ② 6、

2.1 CSS一些常見的屬性&&選擇器

cascading style sheet css是cascading style sheet 層疊式樣式表的簡寫。 一些常見的屬性 字元顏色： color:red; color屬性的

HTML&CSS基礎學習筆記1.33-元素選擇器

元素選擇器 最常見的 CSS 選擇器是元素選擇器。換句話說，文件的元素就是最基本的選擇器： p { text-indent:10px; color:blue; } 什麼情況下使用元素選擇器，一般我們這樣認為： 如果你想要讓頁面中所有的指定元素都有這個

python--前端之CSS（css頁面引入方法、選擇器之基本選擇器、組合選擇器）

gin 如果 優點 選擇器 alt 前端 設置字體 行高 常用 CSS產生背景： 為了讓網頁元素的樣式更加豐富，也為了讓網頁的內容和樣式能拆分開，CSS由此思想而誕生，CSS是 Cascading Style Sheets 的首字母縮寫，意思是層疊樣式表。 有了CSS，ht

css基礎語法一（選擇器與css導入方式）

數字 mic link html clas ref height font 兼容 頁面中，所有的CSS代碼，需要寫入到<style></style>標簽中。style標簽的type屬性應該選擇text/css，但是type屬性可以省略。 CS