定位深层嵌套元素

Question

我正在创建一个自定义Tumblr主题，我遇到了<blockquote>的一个小问题。我想在<blockquote>中仅显示第一个blockquote（这是代码中的最后一个<div>）。例如：

<div class="post-content">
    <div class="body-text">
        <p><a href="http://example.com" class="tumblr_blog">Lorem</a>:</p>
        <blockquote>
            <p><a href="http://example.com" class="tumblr_blog">Ipsum</a>:</p>
            <blockquote>
                <p><a href="http://example.com" class="tumblr_blog">Dolor</a>:</p>
                <blockquote>
                    <p><a href="http://example.com" class="tumblr_blog">Sit</a>:</p>
                    <blockquote>
                        <p><a href="http://example.com" class="tumblr_blog">Amet</a>:</p>
                        <blockquote>
                            <p><a href="http://example.com" class="tumblr_blog">Consectetur</a>:</p>
                            <blockquote>
                                <p>Phasellus scelerisque dui sed velit facilisis pulvinar. Cras congue quis lorem ac feugiat.</p>
                            </blockquote>
                            <p>Aenean maximus mi sollicitudin, rutrum mauris vel, laoreet magna. Proin vitae tristique nisl.</p>
                        </blockquote>
                        <p>Maecenas eu orci consectetur, hendrerit arcu at, imperdiet massa.</p>
                    </blockquote>
                    <p>Vestibulum in ornare massa. Duis felis arcu, bibendum quis nisl eget, tincidunt facilisis urna.</p>
                </blockquote>
                <p>Fusce lobortis laoreet rutrum. Nam in arcu quis erat laoreet consequat eget quis est.</p>
            </blockquote>
            <p>Maecenas vitae dui viverra, varius nisl id, tempus turpis. Mauris nec lobortis sem.</p>
        </blockquote>
    </div>
</div>

定位最后一个<blockquote>（这是主题上显示的第一个引用）是我正在尝试做的，但我不确定这种做法。最后一个blockquote嵌套在其他块引用中的事实是造成困难的原因。

有没有人知道如何定位最后一个blockquote元素？

注意：我应该提到这一点，因为这是Tumblr主题的代码，blockquotes的数量总是会有所不同，所以它不能被金额作为目标。

Answer 1

不幸的是，据我所知，你不能通过纯CSS进行你想要的选择。 但是，它肯定可以通过Javascript和jQuery使工作变得更容易。

例如，你可以使用这样的函数来返回最深的嵌套块引用：

function getDeepestQuotes() {
  var el;
  // Get the first quote on the post to iterate through
  el = $('.body-text > blockquote');
  // Make sure there are actually quotes
  if (!el.length) {
    return null;
  }
  // Keep going down the stack until we find the one we want
  while (el.length > 0) {
    el = el.children('blockquote');
  }
  // el is now empty - step back up the stack and grab the last working state
  el = el.end();
  // el now contains the lowest scoped blockquotes
  return el
}

直播示例：

function getDeepestQuotes() {
  var el;
  // Get the first quote on the post to iterate through
  el = $('.body-text > blockquote');
  // Make sure there are actually quotes
  if (!el.length) {
    return null;
  }
  // Keep going down the stack until we find the one we want
  while (el.length > 0) {
    el = el.children('blockquote');
  }
  // el is now empty - step back up the stack and grab the last working state
  el = el.end();
  // el now contains the lowest scoped blockquotes
  return el
}

var q = getDeepestQuotes();
if (q) {
  q.addClass('last-quote');
}

blockquote {
  border-left: 15px solid gray;
}

.last-quote {
  border-left-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="post-content">
  <div class="body-text">
    <p><a href="http://example.com" class="tumblr_blog">Lorem</a>:</p>
    <blockquote>
      <p><a href="http://example.com" class="tumblr_blog">Ipsum</a>:</p>
      <blockquote>
        <p><a href="http://example.com" class="tumblr_blog">Dolor</a>:</p>
        <blockquote>
          <p><a href="http://example.com" class="tumblr_blog">Sit</a>:</p>
          <blockquote>
            <p><a href="http://example.com" class="tumblr_blog">Amet</a>:</p>
            <blockquote>
              <p><a href="http://example.com" class="tumblr_blog">Consectetur</a>:</p>
              <blockquote>
                <p>Phasellus scelerisque dui sed velit facilisis pulvinar. Cras congue quis lorem ac feugiat.</p>
              </blockquote>
              <p>Aenean maximus mi sollicitudin, rutrum mauris vel, laoreet magna. Proin vitae tristique nisl.</p>
            </blockquote>
            <p>Maecenas eu orci consectetur, hendrerit arcu at, imperdiet massa.</p>
          </blockquote>
          <p>Vestibulum in ornare massa. Duis felis arcu, bibendum quis nisl eget, tincidunt facilisis urna.</p>
        </blockquote>
        <p>Fusce lobortis laoreet rutrum. Nam in arcu quis erat laoreet consequat eget quis est.</p>
      </blockquote>
      <p>Maecenas vitae dui viverra, varius nisl id, tempus turpis. Mauris nec lobortis sem.</p>
    </blockquote>
  </div>
</div>

（请注意，这将在第一个引用的帖子中返回所有引号。如果您只想要拆分引用的第一个引用，请将return el替换为return el.first()。同样，这将在拆分引号上迭代地工作以检索最嵌套的引用。如果这是一个问题，则需要在每次选择器修改后查找.first()。）

以上示例演示了jQuery的状态堆栈 - 如果您希望遍历所有引号以执行某种形式的嵌套样式，这可能很有用。

作为另一个例子，这里有一个snippit，将单色彩虹中的所有引号呈现为最旧的黑色和最新的浅灰色，无论它有多深：

var el;
// Get the first quote on the post to iterate through
el = $('.body-text > blockquote');
// Make sure there are actually quotes
if (!el.length) {
  return;
}
// Keep going down the stack until we find the one we want
var depth = 0;
while (el.length > 0) {
  el = el.children('blockquote');
  depth++;
}
// el is now empty - step back up the stack and grab the last working state
el = el.end();
// Don't cancel depth - so that the top level has at least some gray in it.
//depth--;
// el now contains the lowest scoped blockquotes
// Save the max depth for later
var maxDepth = depth;
// Step back up the jQuery stack and operate on each level of quoting
while (el.length) {
  // Generate a black and white rainbow using the stack depth for blackness
  var hsla =  'hsla(0, 0%, ' + (100 - Math.floor((depth / maxDepth) * 100)) + '%, 1)';
  el.css('border-left-color', hsla );
  // Step up
  el = el.end();
  depth--;
}

直播示例：

function bwRainbowQuotes() {
  var el;
  // Get the first quote on the post to iterate through
  el = $('.body-text > blockquote');
  // Make sure there are actually quotes
  if (!el.length) {
    return;
  }
  // Keep going down the stack until we find the one we want
  var depth = 0;
  while (el.length > 0) {
    el = el.children('blockquote');
    depth++;
  }
  // el is now empty - step back up the stack and grab the last working state
  el = el.end();
  // Don't cancel depth - so that the top level has at least some gray in it.
  //depth--;
  // el now contains the lowest scoped blockquotes
  // Save the max depth for later
  var maxDepth = depth;
  // Step back up the jQuery stack and operate on each level of quoting
  while (el.length) {
    // Generate a black and white rainbow using the stack depth for blackness
    var hsla =  'hsla(0, 0%, ' + (100 - Math.floor((depth / maxDepth) * 100)) + '%, 1)';
    el.css('border-left-color', hsla );
    // Step up
    el = el.end();
    depth--;
  }
}

bwRainbowQuotes()

blockquote {
  border-left: 15px solid gray;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="post-content">
  <div class="body-text">
    <p><a href="http://example.com" class="tumblr_blog">Lorem</a>:</p>
    <blockquote>
      <p><a href="http://example.com" class="tumblr_blog">Ipsum</a>:</p>
      <blockquote>
        <p><a href="http://example.com" class="tumblr_blog">Dolor</a>:</p>
        <blockquote>
          <p><a href="http://example.com" class="tumblr_blog">Sit</a>:</p>
          <blockquote>
            <p><a href="http://example.com" class="tumblr_blog">Amet</a>:</p>
            <blockquote>
              <p><a href="http://example.com" class="tumblr_blog">Consectetur</a>:</p>
              <blockquote>
                <p>Phasellus scelerisque dui sed velit facilisis pulvinar. Cras congue quis lorem ac feugiat.</p>
              </blockquote>
              <p>Aenean maximus mi sollicitudin, rutrum mauris vel, laoreet magna. Proin vitae tristique nisl.</p>
            </blockquote>
            <p>Maecenas eu orci consectetur, hendrerit arcu at, imperdiet massa.</p>
          </blockquote>
          <p>Vestibulum in ornare massa. Duis felis arcu, bibendum quis nisl eget, tincidunt facilisis urna.</p>
        </blockquote>
        <p>Fusce lobortis laoreet rutrum. Nam in arcu quis erat laoreet consequat eget quis est.</p>
      </blockquote>
      <p>Maecenas vitae dui viverra, varius nisl id, tempus turpis. Mauris nec lobortis sem.</p>
    </blockquote>
  </div>
</div>

这当然可以通过普通的JS＆amp; amp; DOM查询，但jQuery没有问题。

Answer 2

如果您知道最后一个blockquote始终是您可以执行的第三个blockquote：

.entry blockquote blockquote blockquote { }

Answer 3

扩展第一个答案：

如果您知道最后一个blockquote始终是您可以执行的第三个blockquote：

.entry blockquote blockquote blockquote { }
// ".entry>blockquote>blockquote>blockquote" would be more specific

我会建议一个类或更短的唯一选择器。 CSS选择器由内到外计算。它首先会找到所有的块引用，然后删除那些不是blockquotes的孩子，然后删除那些不是blockquotes的孩子们的块子引用的孩子，然后最终删除那些不是。在入门课内。您最好使用第3级或其他类别的类来提高性能。