Question

我想在没有使用nth-child / nth-of-type选择器的情况下定位'Person 2'但是我现在似乎无法使用相邻的兄弟选择器缩小范围：

<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然而“cite + cite”或“blockquote [title =”quote“] cite + cite”不起作用。我在这里缺少什么？

另外，你能解释我如何改变最后<em>的颜色吗？我尝试了nth-child / nth-of-type选择器，但每次选择多个<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

你想选择person2吧？试试这个简单的代码。

只需选择相邻的blockquote并设置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>

Answer 2

第N个选择器在当前嵌套上下文中工作。因此，您需要升级以定位最后一个分组，例如blockquote:last-of-type em {}

至于第一个问题，你不能只针对没有第n个选择者的第二个问题。我建议添加一个课程。

[编辑]好吧，你可以共同攻击nth-child（2）近似值，因为Andrei对这个答案发表了评论。我仍然建议使用课程。

Answer 3

回答第一个问题

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/

CSS选择器（相邻兄弟和nth-child / nth-of-type）

3 个答案: