如何做CSS通配符搜索？

我有三个divs与下面的类：如何做CSS通配符搜索？

<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，如果它与通用部分相匹配，这将起作用。可能吗？

来源

2016-08-05 Shaiful Islam

你的意思是'网页搜索站点健康束页搜索网站健康束型医疗group'？ –

你需要什么叫属性选择。一个例子，使用您的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属性选择https://jsfiddle.net/sajib_hassan/jku1fdh8/

的更多信息，你可以找到here和here。

来源

2016-08-05 10:34:55

感谢您的回答，。有效！！ –

这是不是你正在寻找的完全相反，这是为了能够根据他们的类名共同的文本来选择元素？ – Shaggy

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

来源

2016-08-05 10:27:41 3rdthemagical

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>

来源

2016-08-05 10:27:50 rafaelcastrocouto

试试这个

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

来源

2016-08-05 10:29:59

请注意，这不会选择第二个元素，它没有'.page-search-site'类。 – Shaggy

使用div [class * =“health-bundle”] {background：red;}您更改了html代码 –

您班上有什么常见的可以使用[class * =“common word”] –

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

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

它选择所有div元件与page-search-site类和包含子串health-bundle类属性。

来源

2016-08-05 10:37:10 kamoroso94

我认为你在发布之前没有测试过它？它不会匹配问题中包含的任何*元素。 – Shaggy

啊，我明白你的意思了。我没有考虑到class属性包含所有类的事实，所以它永远不会工作。责怪我的懒惰，但明天我会解决这个问题;这里很晚。 – kamoroso94

你要找的是选择与health-bundle-开始或含有health-bundle-前面有一个空格，所以你需要使用attribute selectors，而不是class selectors类名称的列表，不支持通配符的所有元素selctor 。

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

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

来源

2016-08-05 10:59:47 Shaggy

如何做CSS通配符搜索？

回答

相关问题