Question

CSS类

.MyLinkList {
  border: 2px solid yellow !important;
  border-left: 2px solid green !important;
  font-family: chiller !important;
  font-size: 12px !important;
  color: red !important;
}

<li class="MyLinkList">
  <span style="padding-right: 10px;font-family:Arial;font-size:11px;color:Black;font-style:normal;font-weight:normal;text-decoration:none;">g</span>
</li>

对于span，给出了内联样式，它获得了更多的优先级，我们的类MyLinkList颜色样式等没有被应用，我怎么能使span取MyLinkList类样式。我知道我可以使用.MyLinkList span，但我不想这样做。

Answer 1

我知道我可以使用.MyLinkList，但我不想要。

这是你唯一的选择。

跨度没有color: inherit，所以它不会采用父元素的风格。只有专门针对跨度的样式才会影响它。

Answer 2

你可以通过JavaScript来实现：

如果您需要更改一个元素（这将删除内联样式）：

var changeMyStyle = document.querySelector(".MyLinkList>span"); changeMyStyle.style = ""; changeMyStyle.classList.add("MyLinkList");
如果您有更多需要重置的span元素：

var changeThem = document.querySelectorAll(".MyLinkList>span"); var changeThemLen = changeThem.length; for(var i = 0; i < cnahgeThemLen; i++) { changeThem[i].style = ""; changeThem[i].classList.add("MyLinkList"); }

说明：这段代码将做两件事： 1.它将从span元素中删除内联样式 2.它将CSS类添加到span元素

您可以添加已定义的类或其他类，您可以添加多个类，并基本上重新定义您想要的任何内容。

使用另一个span类替换内联样式

2 个答案: