Question

想要知道用于选择类“bar”的jQuery选择器，如果它位于按钮元素（没有类）下，而该元素又位于带有“foo”类的div下面

ma >>= amb == do mb <- fmap amb ma == join (fmap amb ma)
                 mb

“。foo button.bar”不起作用

已编辑：感谢所有解决方案，尝试了解决方案，但出于某种原因，以下内容也被选中：

<div class="foo">
  <button>
    <i class="bar">X</i>
 ...

我的意图是，如果它位于具有mce-first的div下，则仅使用dashicons-edit类来处理<div id="mceu_36" class="mce-widget mce-btn mce-first" tabindex="-1" aria-labelledby="mceu_36" role="button" aria-label="Align left"> <button role="presentation" type="button" tabindex="-1"> <i class="mce-ico mce-i-dashicon dashicons-align-left"></i> </button> </div> ... <div id="mceu_40" class="mce-widget mce-btn" tabindex="-1" aria-labelledby="mceu_40" role="button" aria-label="Edit "> <button role="presentation" type="button" tabindex="-1"> <i class="mce-ico mce-i-dashicon dashicons-edit"></i> </button> </div>。在上面的例子中，“mce-first”在兄弟div上。

Answer 1

明确遵守您的要求：

使用课程“bar”

<i>

仅限于按钮元素（无课程）
反过来，在“foo”等级的div下面

你会想要这个选择器

div.foo > button:not([class]) > i.bar

在选择器语法中，空格表示DOM层次结构中的任何级别。 >运算符表示直接子项。

如果您不一定要直接选择孩子，只需使用空格

div.foo button:not([class]) i.bar

如果您对这些元素（<button>除外）不是特别感兴趣，并且不关心<button>上可能有或没有哪些类，只需使用

.foo button .bar

您的选择器.foo button.bar正在寻找一个<button> bar，其类foo位于类{{1}}元素下方的任何级别。

Answer 2

您可以使用find检查foo中是否有这么多目标元素。

$('.foo').find('button .bar');

Answer 3

＆＃34; .foo button.bar＆＃34;没有工作

button.bar表示按钮元素具有类bar

HTML看起来像这样

<div class="foo">
  <button class="bar">
    <i class="bar">X</i>

正确： .foo button .bar

带有两个类之间元素的CSS选择器

3 个答案: