Как убрать сторонний селектор?

Question

Я импортировал сторонний CSS (который я не могу изменять) в свое приложение.Этот файл CSS объявляет имя класса и селектор, например:

.third-party-class{
  color: blue;
}

.third-party-class:last-of-type{
  color: red;
}

Моя цель - полностью удалить селектор .third-party-class:last-of-type, используя только CSS.Конечно, вы можете просто переопределить селектор .third-party-class:last-of-type и скопировать каждое свойство из .third-party-class.Но это действительно неудобно, если .third-party-class имеет много свойств.

.third-party-class{
  color: blue;
}

.third-party-class:last-of-type{
  color: red;
}

.desired-li{
  color: blue;
}

<div>
Currently:
  <ul>
    <li class="third-party-class">one</li>
    <li class="third-party-class">two</li>
    <li class="third-party-class">three</li>
</ul>

Desired:
  <ul>
    <li class="desired-li">one</li>
    <li class="desired-li">two</li>
    <li class="desired-li">three</li>
  </ul>
</div>

Вопрос

Можно ли полностью переопределить / удалить селектор CSS, без повторного выделения всех свойств "базовый "класс с использованием только CSS (без JS)?

Answer 1

Вы можете использовать селектор [attribute^=value], он будет переопределять каждый элемент, начинающийся с «значения», так что вы можете сделать что-то вроде этого:

.third-party-class{
  background: blue;
	height: 20px;
	width: 20px;
	margin-bottom: 10px;
}

.third-party-class:last-of-type{
  background: red;
}


div[class^="third-party-class"]{
	background: green;
}

<div class="third-party-class"></div>
<div class="third-party-class"></div>
<div class="third-party-class"></div>
<div class="third-party-class"></div>
<div class="third-party-class"></div>
<div class="third-party-class"></div>
<div class="third-party-class"></div>
<div class="third-party-class"></div>
<div class="third-party-class"></div>
<div class="third-party-class"></div>

Извините, если я не правильно понимаю

Answer 2

Поскольку мы имеем дело с last-of-type, и вы не можете изменить CSS, вы можете добавить дополнительный элемент, который вызовет этот селектор и скроет его (я полагаю, вы можете настроить HTML):

.third-party-class {
  color: blue;
}

.third-party-class:last-of-type {
  color: red;
  background:pink;
  font-size:250px;
  opacity:0.9;
  display:flex;
  vertical-align:sub;
  /*doesn't matter what CSS you will have here*/
}

ul li:last-of-type {
  display:none!important;
}

<ul>
  <li class="third-party-class">one</li>
  <li class="third-party-class">two</li>
  <li class="third-party-class">three</li>
  <li></li>
</ul>

Answer 3

Я согласен с комментарием, который BenM сделал к вашему первоначальному вопросу.

Но ... Если CSS настолько прост (всего одна строка), что ваша скрипка заставляет меня поверить, что вы можете просто использовать "!Важно "на селекторе, который вы хотите перезаписать.

.third-party-class:last-of-type{
    color: blue !important;
 }

Это позволит вам, на основе селектора на основе селектора (при условии, что используется не только цвет), укажите, какой код стороннего производителя вы хотитеделать.