使用Javascript来处理HTML或CSS的神奇功能？

我正在创建一个覆盖CSS的Chrome扩展。我想尝试使用在每个菜单项旁边添加图标。下面是他们用于菜单的代码

<ul class="standAloneNavItems">
    <li class="selected">
        <a href="/cgi-bin/home43535">Home</a>
    </li>
    <li class="unselected">
        <a href="/cgi-bin/mail75653">Mailbox </a>
    </li>
    <li class="unselected">
        <a href="/cgi-bin/account23544">My Account </a>
    </li>
</ul>

我不太喜欢Javascript，但我想知道是否有可能以某种方式使用它们来定位名称，并在其中添加HTML或CSS。

您可以使用和regex来满足您的要求

$('.standAloneNavItems li a').filter(function() {
        return $(this).attr('href').match(/\/cgi-bin\/account/);
    }).css({'background-color': 'red'});

---

既然您希望每个菜单都有一个图标，您可以试试这个

<ul class="standAloneNavItems">
        <li id="image1" class="selected">
           <a href="/cgi-bin/home43535">Home</a>
        </li>

        <li id="image2" class="unselected">
            <a href="/cgi-bin/mail75653">Mailbox </a>
        </li>


           <li id="image3" class="unselected">
           <a href="/cgi-bin/account23544">My Account </a>
        </li>

    </ul>

---

希望这有帮助。

既然您提到了jQuery，您可以使用选择器：

选择包含指定文本的所有元素

例如，您可以选择包含“Home”的所有锚点元素，并将其涂成红色，如下所示：

$('a:contains("Home")').css({
  'color': 'red',
  'background-color':'gray'
});

---

为什么不把它添加到

。standAloneNavItems li

选择器？@ShivanRaptor我希望每个菜单项有一个不同的图标。然后你应该为每个

li

@ShivanRaptor分配不同的CSS类。他们的HTML不在我的权限内。你只能更改CSS吗？哎呀。这没有道理。他们的HTML不在我的权限之内。链接每次都会改变。链接/account/中的单词有时不存在。贯穿始终的是什么，它是像Home，My account这样的文本吗？我可以相应地更新答案。它只是/cgi-bin/和一个随机的数字和字母字符串。菜单项保持相同的名称。然后您可以将$（this.attr（'href'）更新为$（this.text）。匹配（'Account'）您可以链接任何您想要的内容，更多css，等等-更新的演示（显示两种方法）：还有一件事，就是！重要的选项？这里有一个关于

的很好的概述！重要提示

：我试图覆盖他们的CSS。如果我不使用！重要的是，它通常不会做任何事情。这取决于他们的css的其他部分，因为这是一种强制css优先的方式。如果该css已经是控制css，那么这并不重要——但是如果！重要的是给了它优先权，否则它不会有，那么它就重要了。所以这真的取决于。。。

#image1 { content: '\e080'; !important; }
#image3 { content: '\e080'; !important; }
#image3 { content: '\e080'; !important; }

$('a:contains("Home")').css({
  'color': 'red',
  'background-color':'gray'
});