Question

我正在尝试使用CSS通配符选择器设置div样式。所以我做了div[class^="list_"]。但是以下代码不起作用

$('.box2').addClass(function() {
  return 'list_' + $('.box1 li').length;
});

div[class^="list_"] {
  color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="box1">
  <li>a</li>
  <li>b</li>
  <li>c</li>
</ul>
<div class="box2">text</div>

但是当我这样做

div[class^=".box2 list_"] {
    color: red;
}

它影响样式。我的理解是div，其以list_开头的类将具有这种样式。但是无法理解为什么我需要在此通配符选择器中添加.box2

Answer 1

您应该使用*而不是^。根据{{3}}

[attr^=value]   表示属性名称为 attr的元素，其值以值开头（位于前缀之前）
  [attr*=value]   表示属性名称为attr 其值在字符串中至少包含一个值的元素

$('.box2').addClass(function() {
  return 'list_' + $('.box1 li').length;
});

div[class*="list_"] {
  color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="box1">
  <li>a</li>
  <li>b</li>
  <li>c</li>
</ul>
<div class="box2">text</div>

Answer 2

尝试*=。它将在class属性值的任何位置寻找匹配项。

您当前的选择器^=试图在类属性值的开头进行匹配。

请参阅：Attribute Selectors - MDN

$('.box2').addClass(function() {
  return 'list_' + $('.box1 li').length;
});

div[class*="list_"] {
  color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="box1">
  <li>a</li>
  <li>b</li>
  <li>c</li>
</ul>
<div class="box2">text</div>

正如其他人在评论中指出的那样，属性选择器根据其实现方式可能会有些滑落。在这种情况下，如@Pointy所述，您可能要添加两个类。一个用于计数，另一个用于标记其已更改。

您还可以添加data-属性而不是类。类似于data-list-count。那么您的选择器将是[data-list-count]。

Answer 3

^=选择具有属性 class的元素，该元素以开头以下字符串。您可以使用*=选择器选择包含的类 ：

$('.box2').addClass(function() {
  return 'list_' + $('.box1 li').length;
});

div[class*="list_"] {
  color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="box1">
  <li>a</li>
  <li>b</li>
  <li>c</li>
</ul>
<div class="box2">text</div>

但是，我从不依赖于这样的构造-改用新类（根据您的业务逻辑说list），然后可以改用.box2.list （请注意，点后没有空格）：

$('.box2').addClass(function() {
  // your business logic determining which class to add
  return 'list';
});

.box2.list {
  color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="box1">
  <li>a</li>
  <li>b</li>
  <li>c</li>
</ul>
<div class="box2">text</div>

CSS通配符选择器不影响样式

3 个答案: