:not CSS Selector 通配符来选择在href中包含#的标签答案

【问题标题】：:not CSS Selector wild card to select a tags containing # in href:not CSS Selector 通配符来选择在href中包含#的标签
【发布时间】：2021-10-26 12:43:52
【问题描述】：

我的任务是选择 a tag 在其 href 中包含 #，我从 1 天开始尝试但无法获得正确的 css 类，

我尝试了什么： a:not([href$="\\#\\"])

【问题讨论】：

您为什么认为:not 会是您想要的？
我只是在所有链接中添加一些 css 以使其看起来更好并显示链接预览，但我不想选择带有 # 的链接，因为我使用该 css 来显示一些链接元信息js，但我不想选择我自己的域的链接，所以我只使用 ^ 来检查它是否以我的域开头，并使用 * 来检查链接是否包含 #。

标签： css css-selectors href

【解决方案1】：

（你的标题和你的正文内容冲突。我会用正文内容。）

应该是：

a[href*="#"]

来自规范：

E[foo*="bar"]: an E element whose "foo" attribute value contains the substring "bar"

E[foo$="bar"]: an E element whose "foo" attribute value ends exactly with the string "bar"

https://www.w3.org/TR/selectors-3/#selectors

【讨论】：

非常感谢，我也得到了更好的答案并将其发布在这里，但它不允许我选择自己的答案，所以我会选择你的。
不客气。有关可用选择器的说明，请参阅我发布的链接。
是的，我阅读了整个页面，这是一个非常好的资源，它应该位于谷歌搜索的顶部。再次感谢。

【解决方案2】：

通配符选择器用于同时选择多个元素。它选择相似类型的类名或属性并使用 CSS 属性。

有 3 个通配符 css 选择器

* 用于检查选中的事物是否包含单词。也称为包含通配符。
^ 通配符检查选定的 css 属性是否以给定的单词开始。
$ 通配符检查选定的 css 属性是否以给定的单词结束。

就我而言：

<!DOCTYPE html>
<html>
    <head>
        <style> 
          
            /* Define styles */
            a:not([href*="#"]) {  /* WE USE * HERE to check if element contains */
                background: red;
                color: white;
            }
            h1 {
                color:white;
            }
            body {
                text-align:center;
                width:60%;
                background: black;
            }
            a {
               color: silver;
            }
            a[href^="#"] {
            color: blue;
            }
            a[href$="#"] {
            color: green;
            }
        </style>
    </head>
    <body>
        <h1>Example containing # in url</h1>
          
        <!-- Since we have used * with #, all items with
             # in the above code are selected -->
        <a href="/">I am not having # in my url</a><br>
        <a href="/questions/68938789/not-css-selector-wild-card-to-select-a-tags-containing-in-href#">I am a link containing # at last.</a>
        <a href="#hello"> I am link containing # at start of href</a>
        <a href="hello#hello"> I am a link containing # in middle</a>
        <a href="https://stackoverflow.com/">i am also not having # in my url like first link</a>
    </body>
</html>

更多见

【讨论】：