css - CSS 选择器仅用于两个类,没有其他类
问题描述
我正在寻找某种 CSS 选择器,它只会从只有这两个特定类的表中选择某些单元格,而没有别的。这是一个更清晰的示例。
因此,在此表中,我想从行中选择单元格 A 和 D 进行样式设置,但选择它们的唯一可区分方法是它们没有除 .abc 和 .xyz 之外的任何类。所以基本上我需要排除任何具有任何其他类的单元格,即.def、.ghi。
<tr>
<td class="abc xyz">A</td>
<td class="abc xyz def">B</td>
<td class="abc xyz ghi">C</td>
<td class="abc xyz">D</td>
</tr>
现在我知道我可以使用 not 选择器来处理它,但是这些类是从外部源注入到表中的,并且可以添加新类,我真的不想继续添加到不断增长的类列表中以忽略。
td.abc.xyz:not(.def),
td.abc.xyz:not(.ghi) {
/* Style to apply */
}
因此,如果有人能指出我正确的方向,任何可以提供帮助的东西,将不胜感激。
解决方案
您可以考虑属性选择器,但要注意空格和顺序:
[class="abc xyz"],
[class="xyz abc"] {
color:red;
}
<table>
<tr>
<td class="abc xyz">A</td>
<td class="abc xyz def">B</td>
<td class="abc xyz ghi">C</td>
<td class="abc xyz">D</td>
<td class="xyz abc">D</td>
<td class="abc xyz ">this will fail</td>
</tr>
</table>
如果您可以添加一些 JS,则可以使用来避免空格问题trim
var td=document.querySelectorAll('td');
for(var i=0;i<td.length;i++)
td[i].className=td[i].className.trim();
[class="abc xyz"],
[class="xyz abc"] {
color:red;
}
<table>
<tr>
<td class="abc xyz">A</td>
<td class="abc xyz def">B</td>
<td class="abc xyz ghi">C</td>
<td class="abc xyz">D</td>
<td class="xyz abc">D</td>
<td class="abc xyz ">this will be good</td>
</tr>
</table>
推荐阅读
- angular - 未捕获的引用错误:未定义模块
- google-cloud-storage - 从 Google Cloud Storage 读取并加载到 Google Data Store
- python - 如何将 1x1“单元格”对象传递到 1x1 块类初始化方法中,该方法在 3x3 列表中接收 3x3 单元格对象?
- c# - 如何在.net core JwtBearerOptions.Events 中使用依赖注入?
- android - Android电源按钮按下关闭
- lisp - Get the path of the script that is currently executing in Steel Bank Common Lisp
- json - 如何将 Json 响应绑定到表
- python - PyPI 中的 tf-nightly 和 tensorflow 有什么区别?
- python - 在使用 Pandas 进行多处理时出现“进程已分叉”错误
- android - android VideoView 调整视频大小