以“[attribute^=value]”开头的 CSS3 选择器匹配值与引号后有空格的值不匹配 [关闭]答案

【问题标题】：CSS3 selector matching value beginning with "[attribute^=value]" is not matching value that has space(s) after quotation [closed]以“[attribute^=value]”开头的 CSS3 选择器匹配值与引号后有空格的值不匹配 [关闭]
【发布时间】：2015-09-26 10:54:24
【问题描述】：

div[class^="test"]

如果元素是

，则选择器将不匹配标记中的元素

class="  test-something"

（预期的选择器已在后端生成。）

div[class^="  test"]

不是一个选项。

有什么建议吗？

【问题讨论】：

div[class*="test"] 不适合您的情况吗？那是一个包含匹配，所以必须小心使用。它甚至可以匹配class="detest"。您可能会看一下starts-with 和 contains 选择器的组合，例如提到的here 或here。
你想匹配test123吗？如果没有，请使用.test 或[class~=test]。
@Blix 但这不是 [attr^=value] 选择器的用途。您正在使用“开始于”选择器来选择末尾的内容。您应该知道这不起作用，因为 在您的标题中 您将其称为“begins with”选择器。此外，div.test 一点也不坏。谁告诉你的？
@Blix：这与这里有什么关系？好吧，忘记其他人曾经提到的标记名，然后使用.test。那个对你有用吗？如果没有，为什么不呢？
另外，我同意@Harry 的观点，从您描述的情况来看，这很可能与stackoverflow.com/questions/3338680/… 重复。

标签： css css-selectors

【解决方案1】：

您在^= 那里所做的是：

'以..开头'

div[class^="test"] { }

这将适用于这样的事情：

<div class="test and-some-class"></div>  
<!-- only if the very first string in your class matches "test" -->
<!-- so, class=" test something-else" won't work

您必须使用 CSS 选择器：

'包含..'

div[class*="test"] { }

这将起作用

<div class="class test something-else"></div> 
<!-- class name can be anything. "test" can be anywhere -->

参考

CSS3 Attribute Selectors: Substring Matching

【讨论】：

@torazaburo 首先是一个如何正确使用[attr^=value]选择器的例子。
@torazaburo 首先，我从来没有说过第一个是答案，只是他尝试的一个例子以及它是如何工作的。至于我的“第二个”是实际答案，是的，它也将匹配abctestdef，但据我所知，没有其他方法可以匹配一个类。其次，我想这是一个答案，因为它可以满足 OP 的要求