如何编写CSS选择器选中不在table内的.select2-container类下的span元素

错误原因分析 #

你之前的写法不生效是因为*:not(table)匹配的是所有不是<table>的元素，而表格内部的<tr>、<td>、嵌套的<div>等元素都符合这个匹配规则，只要.select2-container的任意一级父元素满足*:not(table)就会被选中，自然会命中表格内部的目标元素。

解决方案 #

方案1：现代浏览器最简写法

主流浏览器（Chrome 105+、Firefox 121+、Safari 15.4+）支持:not()内写后代匹配规则，直接用以下代码即可：

.select2-container:not(table *) {
    width: 100% !important;
}

该选择器会精准选中所有属于.select2-container类、且不是任意<table>元素后代的元素，完全匹配需求。

方案2：全版本兼容写法

如果需要兼容旧版浏览器，可以用「全局设置+特例覆盖」的逻辑实现，无兼容问题：

/* 给所有.select2-container设置宽度 */
.select2-container {
    width: 100% !important;
}
/* 覆盖表格内部的.select2-container样式，width值可根据业务需求调整 */
table .select2-container {
    width: auto !important;
}

内容的提问来源于stack exchange，提问作者AlASAD WAIL