如何在css的頁面上選擇第一次出現的內部類？

Question

我需要選擇'inner'類的第一個匹配項，並在其上應用css。 我嘗試過：第一胎和第一胎，但有些不正確。 請幫忙。 我在尋找什麼是一樣的東西

.inner:first-occurrence 

我嘗試以下，和其他類似的組合 -

.outer:nth-child(1) .inner:nth-child(1){} 
.outer:nth-child(1) .inner:first-child{} 
.outer:nth-of-type(1) .inner{} 
.outer:nth-child(1) .inner:nth-of-type(1){} 
.inner:first-of-type(){} 
.row .inner:firs-of-type{} 
.row .inner:first-child{} 

HTML

<div class="row"> 
    <div class="outer col-xs-9"> 
    <div>some text 1</div> 
    <div class="inner"> 
     ... --select this-- 
    </div> 
    </div> 
    <div class="outer col-xs-3"> 
    <div>some text 2</div> 
    <div class="inner"> 
     ... 
    </div> 
    </div> 
</div> 

Answer 1

由於@Gerard評論，你可以使用

.outer.col-xs-9 .inner { } 

這可行，因爲第一個.outer元素也具有.col-xs-9類。如果您要選擇的第一.outer元素的.inner元素，而不考慮其他類，你可以使用

.row .outer:first-child .inner { } 

的:first-child僞類表示一組兄弟元素之內的第一個元素。您擁有的.inner元素不是兄弟元素，但他們的父母是兄弟姐妹。

.inner { 
 
    color: blue; 
 
} 
 

 
.row .outer:first-child .inner { 
 
    color: red; 
 
}

<div class="row"> 
 
    <div class="outer col-xs-9"> 
 
    <div>some text 1</div> 
 
    <div class="inner"> 
 
     I should be red 
 
    </div> 
 
    </div> 
 
    <div class="outer col-xs-3"> 
 
    <div>some text 2</div> 
 
    <div class="inner"> 
 
     I should be blue 
 
    </div> 
 
    </div> 
 
</div>