Question

我有三个divs以下课程：

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

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

Answer 1

div[class|=page-search-site-health-bundle] {
  color: red;
}

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

阅读更多（https://developer.mozilla.org/en/docs/Web/Guide/CSS/Getting_started/Selectors）

Answer 2

您需要的是名为属性选择器。使用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']

演示： https://jsfiddle.net/sajib_hassan/jku1fdh8/

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

Answer 3

您正在寻找一个选择所有元素的selctor，其中包含以_source开头或以health-bundle-开头的类名列表，前面有空格，因此您需要使用{ {3}}，而不是attribute selectors，它不支持通配符。

＆＃13;

health-bundle-

＆＃13;

[class^="health-bundle-"],[class*=" health-bundle-"]{
    color:#f00;
}

＆＃13;

Answer 4

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

Answer 5

试试这个

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

Answer 6

您正在寻找的CSS选择器如下所示。

div.page-search-site[class*=health-bundle]

选择包含类div的所有page-search-site元素和包含子字符串health-bundle的类属性。

怎么做CSS通配符搜索？

6 个答案: