时间戳

首页 > 解决方案 > 如何使用 span:not() 来避免 span

html - 如何使用 span:not() 来避免 span

问题描述

我想将以下样式应用于我的所有跨度标签，但包含文本“dontwant”的标签除外

 span:not("dontwant"){
    font-weight: inherit;
    filter: drop-shadow(0px 0px 0rem black);
    box-shadow: 0px 0px 0px black
  }

这是我想避免的跨度：dontant

UPDATE 发表在评论中：使用 jquery 来隐藏带有该文本的元素怎么样？那可能吗？

标签： htmljquerycssstyling

解决方案

正如我们所提到的，CSS 没有让您匹配 text 的选择器。您可以在 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 选择所有不包含“dontwan”的跨度并将您的类添加到它们，如下所示：

$('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>

您可以在函数中将其包含在 Angular 中ngOnInit，例如：

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

推荐阅读