添加css并排除结帐页面答案

【问题标题】：Adding css and excluding the checkout page添加css并排除结帐页面
【发布时间】：2020-01-11 05:58:12
【问题描述】：

我想向所有 h3 添加一些 css，除了 woocommerce 结帐页面上显示的那些，但仍然包括我在订单接收页面（这是结帐页面的端点）上显示的 h3。如果我使用

   body:not(.page-id-xy) h3{
            ...;
   }

我收到订单页面上的 h3 也不包括在内。是否有专门针对结帐页面而没有订单接收页面的选择器？

【问题讨论】：

【解决方案1】：

根据您的 HTML 结构，您可以使用“>”选择器来做您想做的事情。请注意，“>”仅选择作为已定义父元素的直接子元素的元素。这是一个小演示，展示了如何做到这一点：

:not(.container) > label{
     color: red;
}

  <div class="container">
    <label for="">123</label>
  </div>  


  <div class="container-1">
    <label for="">345</label>
  </div>

别忘了，h3 元素必须是页面 .page-id-xy 元素的直接子元素才能正常工作。

更新

如果它不是直接孩子，只需使用以下内容：

:not(.container) > .inner-container label{
   color: red;
 }

其中 .inner-container 是直接子级。

【讨论】：

我没有接收订单页面的正文类或类似的东西。它与结帐页面具有相同的类，它只是该页面的一个端点。我需要我网站上的所有 h3 都具有这种样式，但结帐页面上的样式除外，但包括结帐端点页面“订单已收到”上的样式。