Question

我不知道这是否可行，但这是我正在努力实现的目标。对于类类别，图标和icon-location-pin-4样式会在代码中自动生成。实际上，它们是在wp的插件中定义的。如果我在那里更改颜色，它将反映在所有页面上。

对于网站上的某些页面，我不想显示这些颜色，我只想为少数几个网站提供特定的颜色，而这些颜色将始终保留。

<span class="category-icon" style="background-color: #649744;">
   <i class="icon-location-pin-4" style="color: #ffffff; "></i>
</span>

我不确定如何实现此目标，或者可能吗？在某些页面上，代码看起来像..这就是我想要实现的。

<span class="category-icon" style="background-color: #fff;">
   <i class="icon-location-pin-4" style="color: #000; "></i>
</span>

我在同一节中有两行，我希望它仅适用于第二行。

<div class="listing-details footer-section">
    <ul class="preview-category-list">
        <li>
            <a href="">
                <span class="category-icon" style="background-color: #281784;">
                    <i class="fa fa-ticket" style="color: #fff; "></i>
                </span>
                <span class="category-name">Category 1</span>
            </a>
        </li>

    </ul>
</div>
<div class="listing-details footer-section">
    <ul class="preview-category-list">
        <li>
            <a href="">
                <span class="category-icon" style="background-color: #281784;">
                    <i class="icon-location-pin-4" style="color: #fff; "></i>
                </span>
                <span class="category-name">Category 2</span>
            </a>
        </li>

    </ul>
</div>

我想更改打印了icon-location-pin-4的backgorund，而不是上面的代码。但是当我更改backgorund时，它也同样适用于上面的代码

Answer 1

有可能吗？几乎可以肯定。

您可以使CSS选择器更具体，以包括/排除任何必需的内容。没有看到所涉及页面的DOM，就不可能准确无误，但是例如，如果您只希望在一页上进行此操作，请选择该页面唯一的元素作为目标元素的父元素。

Re;另一个提出的问题是，仅针对我们可以使用nth-child（）的对象的第二个实例-尽管，能够自己生成HTML并附加一个可以通过CSS定位的自定义类要好得多-我们不能总是得到我们想要的东西：）。

使用上面的更新代码，获取一些类似于以下内容的HTML：

<!-- page #1 example -->

<div class="pretend-body-page-1"> <!-- pretend this is the body on page 1 -->
  <div class="listing-details footer-section">
      <ul class="preview-category-list">
          <li>
              <a href="">
                  <span class="category-icon" style="background-color: #281784;">
                      <i class="fa fa-ticket" style="color: #fff; ">fa fa-ticket placeholder / example text, due to not having font awesome in code pen - should be removed</i>
                  </span>
                  <span class="category-name">Category 1</span>
              </a>
          </li>
      </ul>
  </div>
  <div class="listing-details footer-section">
      <ul class="preview-category-list">
          <li>
              <a href="">
                  <span class="category-icon" style="background-color: #281784;">
                      <i class="icon-location-pin-4" style="color: #fff; ">fa fa-ticket placeholder / example text, due to not having font awesome in code pen - should be removed</i>
                  </span>
                  <span class="category-name">Category 2</span>
              </a>
          </li>
      </ul>
  </div>
</div>

<hr/>
<span style="color: white;">fake page divide</span>
<hr/>

<!-- page #2 example -->

<div class="pretend-body-page-2"> <!-- pretend this is the body on page 2 -->
  <div class="listing-details footer-section">
      <ul class="preview-category-list">
          <li>
              <a href="">
                  <span class="category-icon" style="background-color: #281784;">
                      <i class="fa fa-ticket" style="color: #fff; ">fa fa-ticket placeholder / example text, due to not having font awesome in code pen - should be removed</i>
                  </span>
                  <span class="category-name">Category 1</span>
              </a>
          </li>
      </ul>
  </div>
  <div class="listing-details footer-section">
      <ul class="preview-category-list">
          <li>
              <a href="">
                  <span class="category-icon" style="background-color: #281784;">
                      <i class="icon-location-pin-4" style="color: #fff; ">fa fa-ticket placeholder / example text, due to not having font awesome in code pen - should be removed</i>
                  </span>
                  <span class="category-name">Category 2</span>
              </a>
          </li>
      </ul>
  </div>
</div>

以下CSS有望选择/实现您所要求的内容：

// only target this element on the specific page
div.pretend-body-page-2 i.icon-location-pin-4:nth-child(1) {
    /**
      Unfortunately !important is required to override the 'inline style' used in the html
      <i style="{inline_style}"

      Ideally we would avoid inline style, as well as the use of !important, 
      as nothing can override !important.

      It is better to rely on the specificity of selectors to target elements
    */
    color: #00ae12 !important;
}

https://codepen.io/mikeyjk/pen/KKpMmpv

编辑：

我需要修改cat-icon将其设置为白色，并将icon-location-pin-check-2设置为黑色，在这种情况下，唯一的引脚周围将不会显示绿色。但是仅针对区域更改，其中上面的cat上的icon-location-pin-check-2没有。

我认为您要问的不是原始问题中的一些其他问题。但这是我尽力而为的解释。

用于修改.cat-icon背景颜色的CSS：

.cat-icon { background-color: #ffffff !important; }
.cat-icon i { color: #000000 !important; }

用于将.icon-location-pin-check-2的颜色修改为黑色的CSS：

.buttons.button-1 { color: #000000; }

我认为您可能需要附加一个屏幕快照，以显示是否仍需要进行哪些更改，我发现它有点难以理解要求。

双重编辑：

好的，谢谢您的截图，我想这就是您要的内容：

.lf-item-container .listing-details:nth-child(3) .cat-icon {
    background-color: black !important;
    color: white !important;
}

用英语，获取这两行的父级，确定我们要定位的行（父级.lf-item-container下的第三行），然后指定要修改的元素。

如果您在该容器中添加了另一行，则此CSS将是一个问题。如在理想世界中所述，我们可以更改HTML输出以使CSS更加简单。

Answer 2

如果要为奇数/事件行提供样式，则可以使用：child（）css选择器，如下所示：

div.listing-details:nth-child(2) {
  background: red;
}

以上代码仅在您要为带有“ listing-details”类的第二个div应用CSS时可用。

如果要对所有事件div应用css，则可以使用以下代码：

 div.listing-details:nth-child(even) {
      background: red;
    }

或者您想对所有div但特定页面应用css，则可以使用ID（＃），如下所示：

#ID_Of_Page div.listing-details:nth-child(even) {
  background: red;
}

覆盖特定页面的样式

2 个答案: