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]选择器匹配其属性的每个元素   值以指定值开头。

span[onclick^=gotoURL]

表示使用属性onclick抓取span，其值以gotoURL开头。

https://jsfiddle.net/h0qg6nys/

Cheerio：）

编辑：vivekkupadhyay更快......

编辑2： btw。您可以选中此选项卡参考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还包括$= 结束的值，*= 包含值。这在Legacy浏览器（即IE）中不可用。

CSS还不够复杂（包括更多有趣的模式匹配），因此虽然您可以查找gotoURL（span[onclick]^=gotoURL），但无法匹配gotoURL()。< / p>

作为一个侧面点，你真的不应该使用onclick属性。它只适用于那些没有听说过不引人注目的JavaScript的人。

Answer 3

你不应该为焦点添加样式吗？ 它可能会工作。或者也是活跃的。

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