Spree with Deface:哪个css选择器会从这段代码中选择第一个h3？

Question

我正在尝试使用deface创建一个狂欢网站的主题。Deface使用css选择器来选择元素，然后修改它们，所以从理论上讲，如果你只有css2/3的经验，并且有任何想法，请在下面留下答案。

给定this file (下面的代码片段)，如何选择第一个h3元素。不幸的是，deface是孤立工作的，所以没有周围的元素可以绑定，否则我可以做一些像.container h3:first-child这样的事情，然后用它完成，这也意味着像h3:first-child这样的东西不能工作，因为这将选择h3元素的第一个子元素。

Html代码片段：

<h3><%= accurate_title %></h3>

<div data-hook="account_summary">
  <dl id="user-info">
    <dt><%= t(:email) %></dt>
    <dd><%= @user.email %> (<%= link_to t(:edit), spree.edit_account_path %>)</dd>
  </dl>
</div>

<div data-hook="account_my_orders">

  <h3><%= t(:my_orders) %></h3>
  <% if @orders.present? %>
    <table class="order-summary">

任何想法或想法都很感谢！谢谢!

Answer 1

它还意味着像h3:first-child这样的东西不起作用，因为这将选择h3元素的第一个子元素。

不对。它选择the h3 element , not the h3 element。

无论如何，如果deface像您所暗示的那样将h3视为三个根元素之一(这对我来说并不真正有意义)，请尝试以下方法：

h3:root

或者，如果它实际上将您的HTML代码片段放在某个匿名根元素中，您可以尝试使用以下代码：

:root > h3:first-child

:root pseudo-class是不言自明的。