Стиль перезаписи для указанных c страниц

Question

Я не знаю, возможно ли это, но это то, чего я пытаюсь достичь. Для значка категории класса и значка icon-location-pin-4 автоматически генерируются стили в коде. На самом деле они определены внутри плагина в WP. Если я изменю цвет там, это отражается на всех страницах.

Для некоторых страниц сайта я не хочу отображать эти цвета, я хочу указать c цвета только для нескольких сайтов, и эти цвета останутся всегда.

<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>

Я хочу внести изменения для backgorund, где выводится icon-location-pin-4, а не для кода выше. Но когда я изменяю backgorund, он также применяется для кода выше

Answer 1

Возможно ли это? Почти наверняка.

Вы можете сделать селектор CSS более точным c, чтобы включить / исключить все, что требуется. Не видя DOM вовлеченных страниц, невозможно быть точным, но если, например, вы хотели это только на 1 странице, выберите элемент, уникальный для этой страницы, который является родительским для целевого элемента.

Re; другой поднятый вопрос, касающийся только 2-го экземпляра чего-то, что мы можем использовать 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 на черный, в этом случае единственный вывод не будет отображать зеленый цвет. Но только изменения для регионов, где icon-location-pin-check-2 no на cat выше.

Я думаю, что вы просите о нескольких разных вещах, не в первоначальном вопросе ... но вот моя лучшая интерпретация ..:

CSS для изменения цвета фона .cat-icon:

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

CSS для изменения цвета .icon-location-pin -check-2 to black:

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

Я думаю, что вам может понадобиться прикрепить скриншот, демонстрирующий, какие изменения вам нужны, если это все еще не так, я нахожу это немного запутанным пониманием требований.

Двойное редактирование:

Хорошо, спасибо за скриншот, я думаю, это то, что вы просите:

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

На английском sh, беря родителя обеих этих строк, определяя, на какую строку мы хотим нацелиться (3-ю под родительским .lf-item-container), затем определяя элемент, который мы хотим изменить.

Если вы добавили другая строка этого контейнера, это CSS будет проблемой. Как упоминалось в идеальном мире, мы можем изменить вывод HTML, чтобы сделать CSS немного проще.

Answer 2

Если вы хотите задать стили для нечетной строки / строки события, вы можете использовать: child () css селектор, как показано ниже:

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

Приведенный выше код можно использовать только тогда, когда вы хотите применить CSS для 2-го div с классом 'list-details'.

Если вы хотите применить css для всех div событий, вы можете использовать следующий код:

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

Или вы хотите чтобы применить css для всех страниц div, кроме конкретной страницы, вы можете использовать для этого идентификатор (#), например:

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