为什么我的jQuery：Not()选择器不能在CSS中工作我有这样的布局：<div id="sectors">
<h1>Sectors</h1>
<div id="s7-1103" class="alpha"></div>
<div id="s8-1104" class="alpha"></div>
<div id="s1-7605" class="beta"></div>
<div id="s0-7479"></div>
<div id="s2-6528" class="gamma"></div>
<div id="s0-4444"></div></div>使用这些CSS规则：#sectors {
width: 584px;
background-color: #ffd;
margin: 1.5em;
border: 4px dashed #000;
padding: 16px;
overflow: auto;}#sectors > h1 {
font-size: 2em;
font-weight: bold;
text-align: center;}#sectors > div {
float: left;
position: relative;
width: 180px;
height: 240px;
margin: 16px 0 0 16px;
border-style: solid;
border-width: 2px;}#sectors > div::after {
display: block;
position: absolute;
width: 100%;
bottom: 0;
font-weight: bold;
text-align: center;
text-transform: capitalize;
background-color: rgba(255, 255, 255, 0.8);我使用jQuery添加unassigned类添加到没有类的扇区。alpha, beta或gamma:$('#sectors > div:not(.alpha, .beta, .gamma)').addClass('unassigned');然后，我对该类应用了一些不同的规则：#sectors > div.unassigned {
color: #808080;
background-color: #e9e9e9;
opacity: 0.5;}#sectors > div.unassigned::after {
content: attr(id) ' - Unassigned';}#sectors > div.unassigned:hover {
opacity: 1.0;}在现代浏览器中，一切都是完美无缺的。交互式jsFiddle预览但就像:not()jQuery中的选择器是基于:not()在CSS 3中，我想我可以直接将它移到我的样式表中，这样我就不必依赖于使用jQuery添加额外的类了。此外，我对支持早期版本的IE并不感兴趣，其他浏览器对:not()选择器。所以我试着改变.unassigned上面的部分(知道我的布局中只有扇区Α，Β和Γ)：#sectors > div:not(.alpha, .beta, .gamma) {
color: #808080;
background-color: #e9e9e9;
opacity: 0.5;}#sectors > div:not(.alpha, .beta, .gamma)::after {
content: attr(id) ' - Unassigned';}#sectors > div:not(.alpha, .beta, .gamma):hover {
opacity: 1.0;}但一旦我这么做它就停止工作了所有浏览器！我的未分配区域不再是灰色的、褪色的或标记为“未分配的”的。已更新但不具有交互性的jsFiddle预览为什么:not()选择器在jQuery中工作，但在CSS中失败？既然jQuery声称“CSS 3兼容”，或者我缺少了什么东西，那么在这两个地方，它不是应该同样工作吗？是否有一个纯粹的CSS解决方案，或我将不得不依赖于一个脚本？
- 3 回答
- 0 关注
- 623 浏览
相关问题推荐
添加回答
举报
0/150
提交
取消