css - 我如何定義這種結構的風格

Question

<h3 class="st-module-heading"> 
     <span> 
     <span>Lastest Products</span> 
     </span> 
</h3> 

我想定義包含內容「最新產品」的span元素的css。
怎麼辦？非常感謝。

Answer 1

的選擇應該是：

h3.st-module-heading span { 
} 

HTML：

<h3 class="st-module-heading"> 
    <span>Lastest Products</span>  
</h3> 

Answer 2

一種辦法是給跨度類：

<h3 class="st-module-heading"> 
     <span> 
     <span class='myspan'>Lastest Products</span> 
     </span> 
</h3> 

然後在CSS，這取決於如何具體或一般你需要：

.myspan { ... } 

/*or*/ 

span.myspan { ... } 

/*or*/ 

h3.st-module-heading span.myspan { ... } 

沒有定義的特定類，你需要做的是：

h3.st-module-heading span span { ... } 

它選擇內<span>內<h3 class=st-module-heading>的<span>。

但爲什麼額外<span>？在你當前的代碼中，它沒有做任何事情。除非你需要它，否則你可以一起輕鬆地將它們一起移除。

無論哪種方式，這裏是一個Fiddle玩弄。

Answer 3

假設確切結構（兩個嵌套的跨度），可以使用下面的CSS，只選擇第二嵌套跨度：

HTML：

<h3 class="st-module-heading"> 
     <span> 
     <span>Lastest Products</span> 
     </span> 
</h3> 

CSS：

.st-module-heading>span>span { 
    /* Your css here */ 
} 

>是兒童選擇器 - 所以.st-module-heading>span>span字面意思是'選擇跨度是直接在另一個範圍內，這是直接裏面的st-module-heading類的元素。

如果需要，您可以簡單地使用.st-module-heading span span - 但如果您有其他嵌套跨度，則可能不適合。

鏈接到JS Fiddle。