如何在嵌套中進一步選擇包含指定類的div？

Question

我想添加樣式到一個更大的div結構中的div，並且在結構中爲其存在某個類。 html是

<div class="view-content"> 
    <div class="views-row views-row-1 views-row-odd views-row-first"> 
     <div class="ds-2col-stacked-fluid node node-lesson node-promoted node-teaser contextual-links-region view-mode-teaser teaser-layout clearfix" typeof="sioc:Item foaf:Document" about="/node/673"> 
      <div class="contextual-links-wrapper contextual-links-processed"> 
      <div class="group-header teaser-header"> 
      <div class="group-left teaser-left"> 
       <div class="field field-name-field-lessonintro field-type-text field-label-hidden"> 
        <div class="field-items"> 
         <div class="field-item even"> 
          <p>Some text</p> 

我創建的類是左前導和右前導。我看到，包含的字段外格是

<div class="views-row views-row-1 views-row-odd views-row-first"> 

如果我做

.views-row > div { 
    border: 1px solid #a1c0df; 
} 

它的工作原理，但將適用於事，我不想把它應用到爲好。所以真的，我試圖找出一個選擇器，可以完成上面，但只有當div包含teaser-left或teaser-在嵌套中更進一步。

謝謝！

Answer 1

如果傳情左|右是意見排

.views-row > .teaser-left, 
.views-row > .teaser-right { 
border: 1px solid #a1c0df; 

}

的直接子女，如果嵌套更深入

.views-row .teaser-left, 
.views-row .teaser-right { 
    border: 1px solid #a1c0df; 
} 

如果適用，第一個解決方案是更effcicient CSS （渲染速度更快），但在IE6中不支持（如果您仍然需要）

另一種選擇是創建類.views行傳情左，.views行傳情右和解決這些只有這些在你的CSS

.views-row-teaser-left, .views-row-teaser-right { border: 1px solid #a1c0df; } 

這部作品在每個瀏覽器，是最有效的css AND具有較低的特異性（這使得在其他風格聲明中更容易否定，並且不會將您拖入「特殊戰爭」）。如果你可以改變html，這是推薦的。