如何使用span：not避免一定的跨度

问题描述

我想对我的所有span标签应用以下样式，但那些包含文本“ dontwant”的标签除外

sidebarItems

这是我要避免的跨度：

更新发表在评论中：使用jquery隐藏带有该文本的元素怎么办？有可能吗？

解决方法

我们已经提到， CSS没有选择器可让您匹配文本。您可以通过在CSS中完成操作，方法是将类添加到所有不想包含样式的文本元素中，但这需要更改HTML。

您在评论中询问是否可以使用jQuery来完成-可以使用contains和not选择器的组合来实现。

使用jQuery 也意味着您不必更改现有的HTML。

最简单的方法是先创建一个具有要应用的样式的CSS类，例如

.shadow {
    font-weight: inherit;
    filter: drop-shadow (0px 0px 0rem black);
    box-shadow: 0px 0px 0px black
}

现在，您可以使用JQuery选择不包含“ dontwant”的所有范围，并向其中添加您的类，

$('span:not(:contains("dontwant"))').addClass('shadow');

您只需将此行添加到您的$(document).ready(function()

工作摘要：

    $('span:not(:contains("dontwant"))').addClass('shadow');

.shadow {
    font-weight: inherit;
    filter: drop-shadow(0px 0px 0rem black);
    box-shadow: 0px 0px 0px black;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<p>This is a span I <span>dontwant</span> to add <span>shadow</span>.</p>
<p>This is <span>another</span> span I <span>dontwant</span> to add <span>shadow</span>.</p>

您可以在ngOnInit函数的Angular中添加它，例如：

public ngOnInit(){
   $(document).ready(function(){
      $('span:not(:contains("dontwant"))').addClass('shadow');
   });
}