html - 如何在CSS页脚中定位元素

Question

“ok”和“oops”页面上有 2 个文本，一个在 <footer> 下下一个class=> 'meta' . 我想验证页脚文本，我正在使用

span(:alert){div_element(:class => 'application').div_element(:class => 'txt').span_element(:class => 'app-text')} 

但它使用元“类”文本“oops”进行验证，因为两者具有相同的 div 路径。 如何在特定于页脚的内部找到跨度类“app-txt”？

<footer>
  <div class="application" style="opacity: 1;">
    <div class="txt" style="background-color: transparent;">
      <span class="app-txt" style="background-color: transparent;">ok</span>
    </div>
  </div>
</footer>

<div class="meta">
  <div class="application" style="opacity: 1;">
    <div class="txt" style="background-color: transparent;">
      <span class="app-txt" style="background-color: transparent;">oops</span>
    </div>
  </div>
</div>

Answer 1

要找到 ok 使用:

footer .app-txt

要找到 oops 使用:

.meta .app-txt

footer .app-txt {color: red;}
.meta .app-txt {color: orange;}

<footer>
  <div class="application" style="opacity: 1;">
    <div class="txt" style="background-color: transparent;">
      <span class="app-txt" style="background-color: transparent;">ok</span>
    </div>
  </div>
</footer>

<div class="meta">
  <div class="application" style="opacity: 1;">
    <div class="txt" style="background-color: transparent;">
      <span class="app-txt" style="background-color: transparent;">oops</span>
    </div>
  </div>
</div>