:not CSS 选择器通配符到 select 在 href 中包含 # 的标签

Question

我正在执行 select a tag 的任务，它的 href 中包含 #，我正在尝试从 1 天开始，但无法获得正确的 css class,

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

Answer 1

（你的标题和你的 body 内容有冲突。我会选择 body 的内容。）

它将是：

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

Answer 2

通配符select或用于同时select多个元素。它 select 与 class 名称或属性的相似类型并使用 CSS 属性。

有3个通配符css select或

* 用于检查 selected 的东西是否包含单词。它也被称为包含通配符。
^ 通配符检查是否 selected css 属性 starts 与给定的单词。
$ 通配符检查是否 selected css 属性 ends 与给定的单词。

就我而言：

<!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://whosebug.com/">i am also not having # in my url like first link</a>
    </body>
</html>

更多见

:not CSS 选择器通配符到 select 在 href 中包含 # 的标签

:not CSS Selector wild card to select a tags containing # in href

css

css-selectors

href

有3个通配符css select或