CSSセレクタ（隣接する兄弟とnth-child/nth-of-type）

Question

nth-child/nth-of-typeセレクタを使用せずに '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を対象に、「引用+引用」や「BLOCKQUOTE [タイトル=」引用「]は動作しません引用+引用します」。私はここで何が欠けていますか？

また、最後の<em>の色を変更する方法についても説明できますか？しかし私はそれが複数選択<em>毎回n番目の子/第nの型セレクタを試みた：

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; } 

はフィドル2番目の質問について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番目のセレクタなしで2番目の質問のみを対象にすることはできません。私はクラスを追加することをお勧めします。

[編集]大丈夫ですか？ Andreiがこの回答にコメントしたように、nth-child（2）近似を一緒にハックします。私はまだクラスを使用することをお勧めします。

Answer 3

person2を選択したいですか？この簡単なコードを試してみてください。

隣接するを選択し、citeをスタイルするだけです。

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

そして、最後の子を標的とするため、このコード使用。

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

SNIPPET

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>