有多少CSS选择器可以包含?
P粉002572690
P粉002572690 2023-08-16 11:30:40
[HTML讨论组]
<p>我已经尝试寻找解决这个问题的答案,但无济于事:</p> <p>我正在使用css选择器来定位所有以col-1、col-2、col-3、col-开头的类名[class*="col-"]。但是我与一些其他第三方集成类名发生了冲突:<code>col-md-11</code>、<code>col-lg-2</code>、<code>col-sm-3</code>... 非常感谢,有没有人有任何想法只选择出类名:col-1、col-2、col-3、col-... 最简洁的方式(可能只需要一行代码)。</p> <p>我的HTML示例:</p> <pre class="brush:php;toolbar:false;">&lt;div class="row row_1"&gt; &lt;div class="col-4"&gt;&lt;/div&gt; &lt;div class="col-10"&gt;&lt;/div&gt; &lt;div class="col-3"&gt;&lt;/div&gt; &lt;div class="col-md-11"&gt;&lt;/div&gt; &lt;/div&gt; &lt;div class="row row_2"&gt; &lt;div class="col-12"&gt;&lt;/div&gt; &lt;div class="col-lg-2"&gt;&lt;/div&gt; &lt;div class="col-8"&gt;&lt;/div&gt; &lt;div class="col-sm-3"&gt;&lt;/div&gt; &lt;/div&gt;</pre> <p>我尝试在互联网上搜索,但找不到解决方案。</p>
P粉002572690
P粉002572690

全部回复(1)
P粉416996828

这有点复杂,但你可以将你现有的内容与:not选择器结合起来;

[class*='col-']:not([class*='col-md'],[class*='col-lg'],[class*='col-sm']){
  color: red;
}
<div class="row row_1">
  <div class="col-4">红色</div>
  <div class="col-10">红色</div>
  <div class="col-3">红色</div>
  <div class="col-md-11">非红色</div>
</div>
<div class="row row_2">
  <div class="col-12">红色</div>
  <div class="col-lg-2">非红色</div>
  <div class="col-8">红色</div>
  <div class="col-sm-3">非红色</div>
</div>
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号