3

我将第三方 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）重新声明“基”类的所有属性？

4

3 回答 3

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>

于 2018-12-18T13:41:03.143 回答
0

我同意 BenM 对您最初的问题的评论。

但是......如果 CSS 像你的小提琴一样简单（只有一行）让我相信你可以在你想要覆盖的选择器上使用“！important”。

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

这将允许您在逐个选择器的基础上（假设使用的不仅仅是颜色）指定您希望第三方代码执行的操作。

于 2018-12-18T13:27:18.540 回答
0

您可以使用[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>

对不起，如果我不明白

于 2018-12-18T13:31:03.333 回答