css - 如何为此结构定义样式

Question

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

我想为span元素定义css包含内容“Latest Products” 怎么办？非常感谢。

Answer 1

一种选择是给跨度一个类：

<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>内<span>内的<h3 class=st-module-heading>。

但为什么额外<span>？在您当前的代码中，它没有做任何事情。您可以轻松地将它们全部一起移除，除非您需要它用于某些东西。

无论哪种方式，都可以Fiddle来玩。

Answer 2

选择器应该是：

h3.st-module-heading span {
}

HTML：

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

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字面意思是在另一个范围内选择直接的范围，直接< / strong>在带有st-module-heading类的元素内部。

如果需要，您可以简单地使用.st-module-heading span span - 但如果您有其他嵌套跨度，则可能不适合。

链接到JS Fiddle。