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

我正在尝试使用CSS通配符选择器设置div的样式。因此，我做了

div[class^=“list_quo;]

。但是下面的代码不起作用

$（'.box2'）.addClass（函数（）{
返回'list_u'+$（'.box1 li'）。长度；
});
div[class^=“list”]{
颜色：红色；
}


a
b
c

text
试试
*=
。在类属性值的任何位置查找匹配项

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

见：


$（'.box2'）.addClass（函数（）{
返回'list_u'+$（'.box1 li'）。长度；
});
div[class*=“list”]{
颜色：红色；
}


a
b
c

text
^=
选择属性为
class
且以以下字符串开头的元素。您可以使用
*=
选择器选择包含以下内容的类：


$（'.box2'）.addClass（函数（）{
返回'list_u'+$（'.box1 li'）。长度；
});
div[class*=“list”]{
颜色：红色；
}


a
b
c

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

[attr^=value]
表示属性名为attr的元素，其值的前缀（前面）为value

[attr*=value]
表示属性名为attr的元素，其值在字符串中至少包含一次value


$（'.box2'）.addClass（函数（）{
返回'list_u'+$（'.box1 li'）。长度；
});
div[class*=“list”]{
颜色：红色；
}


a
b
c

text
依赖
class
属性以任何特定顺序列出类是非常脆弱的。
^=
运算符意味着您希望
类
值以某个字符串开头。您说有效的代码实际上不起作用，因为“box2”之前的
，但如果没有它，则会起作用，因为
.addClass（）
将所需的类属性内容附加到属性值的末尾。您的选择器正在尝试在类属性值的开头与
^=
匹配。尝试
*=
，它会在类属性值中的任何位置查找匹配项。您最好添加两个类：一个用于指示
已受到影响，如“has_list”，另一个用于当前的特定计数。这样你就可以把你的CSS选择器写成
div.has\u list
，这就是属性选择器的问题，虽然@hungerstar的评论可以解决你的问题，但你也会遇到另一个问题，它可能会匹配类，比如
list\u not-needed-to-be-style
或
a-list\u 1
。我同意波蒂对两个独立类的评论