如何进行CSS通配符搜索？

我有三个

div

，课程如下：

<div class="page-search-site health-bundle-medical-group">Some text here</div>
<div class="health-bundle-clinic">Some text here 2</div>
<div class="page-search-site health-bundle-hospital">Some text here 3</div>

这里有一些文本
这里有一些文字2
这里有一些文字3

这里的

健康包-

文本对于所有三个类都是通用的。所以我想写一个CSS，它将适用于所有这三个类，如果它匹配公共部分，它将工作。可能吗？

这里有一些文字
<div class="page-search-site-health-bundle type-medical-group">Some text here</div>
<div class="page-search-site-health-bundle type-clinic">Some text here</div>
<div class="page-search-site-health-bundle type-hospital">Some text here</div>

这里有一些文字
这里有一些文字

div[class |=页面搜索网站健康包]{
颜色：红色；
}

这里有一些文本
这里有一些文字
这里有一些文字

试试这个

div[class*="health-bundle"]{background:red;}

---

您需要的是属性选择器。使用html结构的示例如下：

div.page-search-site[class*='-bundle-medical-group']  {
    color:red 
}

在

div

的位置可以添加任何元素或将其全部删除，在

class

的位置可以添加指定元素的任何属性

div.page-search-site[class*='-bundle-medical-group']
div.page-search-site[class*='-bundle-hospital']
div.page-search-site[class*='-bundle-clinic']

演示：

---

有关CSS属性选择器的更多信息，您可以查找和。

您要查找的CSS选择器如下所示

div.page-search-site[class*=健康包]

---

它选择所有

div

元素，其中class

page search site

和class属性包含子字符串

health bundle

您正在寻找一个选择器，它选择所有元素，这些元素的类名列表以

health bundle-

开头，或者包含

health bundle-

前面带有所以您需要使用，而不是不支持通配符的

[class^=“健康包-”]，[class*=“健康包-”]{
颜色：#f00；
}

这里有一些文本
这里有一些文字2
这里的一些文字3

您的意思是

页面搜索站点健康包页面搜索站点健康包医疗组

？感谢您的详细回答。成功了！！这不是你想要的完全相反吗？你想要的是能够根据它们的类名的共同文本来选择元素？我想你在发布之前没有测试过这一点吧？它与问题中包含的任何元素都不匹配。啊，我明白你的意思。我没有考虑这样一个事实：class属性拥有所有的类，所以它永远不会工作。怪我懒惰，但我明天会解决这个问题；这里已经很晚了。请注意，这不会选择第二个元素，它没有

。页面搜索站点
class.use div[class*=“health bundle”]{background:red；}您更改了html代码您的类中有什么常见的东西可以使用[class*=“common word”]