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

【问题标题】：CSS wildcard selector not effecting styleCSS通配符选择器不影响样式
【发布时间】：2019-03-11 23:15:27
【问题描述】：

我正在尝试使用 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

【问题讨论】：

依赖class 属性以任何特定顺序列出类是非常脆弱的。 ^= 运算符意味着您希望 class 值以某个字符串开始。您说的代码实际上不起作用，因为“box2”之前的.，但没有它，因为.addClass() 将所需的类属性内容附加到属性值的end。
您的选择器试图在类属性值的开头与^= 匹配。试试*=，它会在类属性值的任何地方寻找匹配项。
您最好添加两个类：一个表示<div> 已受到影响，如“has_list”，另一个用于具体计数你现在有。这样你就可以把你的 CSS 选择器写成div.has_list
这就是属性选择器的问题，虽然@hungerstar 的评论会解决你的问题，但你也会遇到另一个问题，它也可能匹配list_not-needed-to-be-style 或a-list_1 之类的类。我会用尖尖的 2 个单独的类的评论去

标签： javascript jquery html css css-selectors

【解决方案1】：

您应该使用* 而不是^。根据MDN

[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>

【讨论】：

【解决方案2】：

试试*=。它在类属性值的任何地方寻找匹配项。

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

见：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>

正如其他人在 cmets 中指出的那样，属性选择器可能会很棘手，具体取决于它们的实现方式。在这种情况下，正如@Pointy 所提到的，您可能想要添加两个类。一个用于计数，一个用于标记它已更改。

您还可以添加data- 属性而不是类。像data-list-count 这样的东西。那么你的选择器就是[data-list-count]。

【讨论】：

【解决方案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>

【讨论】：