用于输入的 Css Selector 哪个名称包含两个单词？答案

【问题标题】：Css Selector for inputs which name contains two words?用于输入的 Css Selector 哪个名称包含两个单词？
【发布时间】：2017-11-15 14:52:22
【问题描述】：

可以使用这个选择器

$( "input[name~='man']" )

识别页面中名称包含单词“man”的任何输入，但如果我需要选择一个包含两个单词的模式，而不是单个单词模式，即“man” （任何东西）'这样

<input name="checkbox-foo-man">
<input name="checkbox-bar-man">
<input name="foo-checkbox-foo-man-foo">

被选中？可能是在“man”之前暗示“checkbox”的正确顺序

【问题讨论】：

单词的顺序重要吗？
是的，编辑了问题。重要的是要具体并确保它只选择预期的内容
您可以使用正则表达式来实现它：stackoverflow.com/questions/190253/…
如果您不想使用其他库，可以选择名称中带有checkbox 的所有输入，然后仅过滤名称属性与正则表达式匹配的输入。
好问题。不幸的是，我认为您无法将词序与 CSS 匹配。

标签： jquery css

【解决方案1】：

您可以通过组合选择器在不使用正则表达式的情况下做到这一点。我认为没有办法以这种方式确保订单。

[name*="foo"][name*="bar"] {
  color: red;
}

<div name="foo-bar"> foo-bar </div> <!-- selected -->
<div name="bar-foo"> bar-foo </div> <!-- selected -->
<div name="foo-bar-baz"> foo-bar-baz </div> <!-- selected -->
<div name="foo-baz"> foo-baz </div>
<div name="bar-baz"> bar-baz </div>

【讨论】：

也许这对你有帮助：input[name*='man']:not([name^='man'])。它选择所有包含单词man但不以 man开头的输入
像魅力一样工作！有订单很好，但我可以处理。在我的回答案例中，它是 input[name*="checkbox"][name*="man"]。谢谢