CSS選擇器（相鄰的兄弟姐妹和第n孩子/第n類型）

Question

我想在不使用第n個孩子/第n類型選擇器的情況下定位'Person 2'但是我似乎無法縮小使用範圍相鄰兄弟選擇在此刻：

https://jsfiddle.net/fk5fxbm4/4/

<div id="myID"> 
    <h2>Title</h2> 

    <blockquote title="quote"> 
     <p>Statement 1</p> 
     <cite>Person 1</cite> 
    </blockquote> 

    <blockquote> 
     <p>Statement 2</p> 
     <cite>Person 2</cite> 
    </blockquote> 

    <blockquote> 
     <p>Statement 3</p> 
     <cite>Person 2</cite> 
    </blockquote> 
</div> 

blockquote[title="quote"] cite { 
    color: red; 
} 

上面的代碼針對1人但是「舉舉+」或「塊引用[標題=」引用「]舉舉+」不起作用。我在這裏錯過了什麼？

另外，你能解釋我將如何去改變最後<em>的顏色？我曾嘗試第n個孩子/類型第n-的選擇器但它選擇多個<em>每次：

https://jsfiddle.net/zs58xbch/7/

<main> 
    <h2>Paragraph 1</h2> 
    <p><em>Lorem ipsum dolor sit amet</em>, Lorem ipsum dolor sit amet. <em>Lorem ipsum dolor sit amet</em>.</p> 
    <h2>Paragraph 2</h2> 
    <p>Lorem ipsum dolor sit amet. <em>Lorem</em> ipsum dolor sit amet. 
    <h2>Paragraph 3</h2> 
    <p><em>Lorem </em> ipsum dolor sit amet.</p> 
    <p><em>Change my color!</em> 
</main> 

em:last-of-type { 
    color: red; 
} 

Answer 1

回答第一個問題

blockquote[title="quote"]+blockquote cite { color: red; } 

更新後的小提琴https://jsfiddle.net/fk5fxbm4/6/

回答第二個問題

p:last-of-type em:last-of-type { color: red; } 

更新小提琴https://jsfiddle.net/zs58xbch/9/

Answer 2

第N個選擇當前的嵌套環境中工作。因此，您需要升級到目標最後一個分組，如blockquote:last-of-type em {}

至於第一個問題，您不能只瞄準沒有第n個選擇器的第二個問題。我建議增加一個班級。

好吧你可以作爲安德烈評論這個答案的黑客在一起的第n孩子（2）近似。我仍然建議使用一個類。

Answer 3

你想選擇person2嗎？試試這個簡單的代碼。

只要選擇相鄰的和樣式cite。

blockquote[title="quote"] + blockquote cite{ 
    color: green; 
} 

而這個代碼使用了針對最後一個孩子。

blockquote:last-child cite{ 
    color: cyan; //select last child 
} 

代碼片段

blockquote[title="quote"] cite { 
 
color: red; 
 
} 
 

 
blockquote[title="quote"] + blockquote cite{ 
 
    color: green; //select 2nd child 
 
} 
 

 
blockquote:last-child cite{ 
 
    color: cyan; //select last child 
 
}

<div id="myID"> 
 
    
 
      <h2>Title</h2> 
 
      
 
      <blockquote title="quote"> 
 
      <p>Statement 1</p> 
 
      <cite>Person 1</cite> 
 
      </blockquote> 
 
      
 
      <blockquote> 
 
      <p>Statement 2</p> 
 
      <cite>Person 2</cite> 
 
      </blockquote> 
 
      
 
      <blockquote> 
 
      <p>Statement 3</p> 
 
      <cite>Person 2</cite> 
 
      </blockquote> 
 
      
 
</div>