Тема Spree с Deface: Какой селектор CSS выберет первый h3 из этого кода?

Question

Я пытаюсь создать тему для сайта Spree, используя deface. Deface использует селекторы css для выбора элементов, а затем их изменения, так что теоретически, если у вас есть только опыт работы с css2 / 3 и у вас есть какие-либо идеи, оставьте ответ ниже.

Учитывая этот файл (фрагмент ниже этого ниже) Как выбрать самый первый 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.

Неверно.Он выбирает элемент h3 , если это первый дочерний элемент , а не первый дочерний элемент элемента h3 .

В любом случае,если deface рассматривает h3 как один из трех корневых элементов, как вы, вероятно, подразумеваете (что на самом деле не имеет смысла для меня), попробуйте это:размещает его в каком-то анонимном корневом элементе, вы можете попробовать использовать это:

:root > h3:first-child

:root псевдокласс довольно понятен.