html - 如何删除第三方选择器？

Question

我将第三方 CSS(不允许我修改)导入到我的应用程序中。这个 CSS 文件声明了一个类名和一个选择器，例如:

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

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

我的目标是仅使用 CSS 完全删除 .third-party-class:last-of-type 选择器。当然，您可以覆盖 .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

由于我们正在处理 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>