Question

我想在添加opacity: 1;时将.main添加到.main.flow类（而不是.flow），这样它也会影响.main.secondary }。

类似于使用鼠标事件（悬停，活动）的东西。

.main {
    opacity: 0;
}

<div class="main flow">
    <div class="not-main">
    </div>
</div>

<div class="main secondary">
</div>

我限制了HTML的结构，因为我只修改了CSS。这只能使用CSS吗？

Answer 1

＆＃13;

.main {opacity:0;}
.main.flow {opacity:1;}
.main:not(.flow) {}
[class="main"] {opacity:1;}

＆＃13;

<div class="main">
  <div class="not-main">Main will be opaque because it has ONLY the main class</div>
</div>
<div class="main secondary">
  <div class="not-main">Main will be transparent because also has .secondary class</div>
</div>
<div class="main flow">
  <div class="not-main">Main flow would be transparent as well because it has more than just the main class, but it also has .main.flow that changes it to opaque.</div>
</div>

＆＃13;

只需添加空格即可：

.main.flow {
  opacity:1;
}

Answer 2

您只需选择相对于它的.main.flow和其他.main元素。

.main元素的兄弟姐妹是否已将“flow”类应用于第一个？

如果是这样的话：

.main {
    opacity: 0;
}

.main.flow, .main.flow + .main {
    opacity: 1;
}

Answer 3

如果班级.main的所有元素都在.main.flow之后，您可以使用此代码：

.main.flow, .main.flow + .main {
    opacity: 1;
}

否则，你不能用纯css来做，因为在这种情况下css没有落后你必须帮助jquery：

＆＃13;

$(document).ready(function(){
  if ($('.main.flow').length > 0)
    $('.main').css('opacity',1);
  else
    $('.main').css('opacity',0);
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="main">
    <div class="not-main">
    </div>
</div>

＆＃13;

使用同一元素

3 个答案: