onclick 功能上的 CSS 选择器

Question

有没有办法在 onclick + function() 上获得 CSS 选择器？您可以通过onclick 获取它。

这是 HTML：

<span onclick="gotoURL(&quot;https://youtu.be/dQw4w9WgXcQ&quot;);">Rick Roll</span>

CSS：

span[onclick] {
    color: blue;
    text-decoration: underline;
}

但这些不起作用：

span[onclick="gotoURL"]

span[onclick="gotoURL()"]

Answer 1

肯定有办法;)

[attribute^=value] 选择器匹配其属性的每个元素 value 以指定的值开头。

span[onclick^=gotoURL]

表示带有属性 onclick 的抓取跨度，其值以 gotoURL 开头。

https://jsfiddle.net/h0qg6nys/

欢呼:)

编辑： vivekkupadhyay 更快...

编辑 2： 顺便说一句。你可以检查这里的选择器引用https://www.w3schools.com/cssref/css_selectors.asp

编辑 3： 30-css-selectors-you-must-memorize

Answer 2

只是澄清属性选择器发生了什么。

• span[onclick] 选择一个 具有 onclick 属性的跨度，无论其值如何。
• span[onclick="…"] 选择一个其onclick 值完全匹配的跨度。那是你的错误：它不完全匹配
• span[onclick^="…"] 选择一个其onclick 值以开头的跨度。这更接近您的目标。

并不总是需要将双引号括起来，但如果该内容包含诸如斜线之类的尴尬字符，则确实需要它们。包含它们总是安全的。

现代 CSS 还包括$=，它以一个值结束，以及*=，它包含一个值。这在旧版浏览器（即 IE）中不可用。

CSS 还不够复杂（还）无法包含更多有趣的模式匹配，因此尽管您可以查找 gotoURL (span[onclick]^=gotoURL)，但无法匹配 gotoURL()。

顺便说一句，你真的不应该使用onclick 属性。它只适用于没有听说过不显眼的 JavaScript 的人。

Answer 3

难道不应该为焦点添加样式吗？ 那时它可能会起作用。或者对于一个活跃的。

span:focus,
span:active{
    color: blue;
    text-decoration: underline;
}