css - 仅使用 CSS3 选择非兄弟元素

Question

我有三个区 block ，每个区 block 都包含另一个区 block 。我想要的是在单击其中一个时选择所有内部 block 。

这是一个说明我的情况的 Codepen:http://codepen.io/anon/pen/viGDx

HTML

<div class="bloc-container">
  <div class="bloc"></div>
</div>

<div class="bloc-container">
  <div class="bloc"></div>
</div>

<div class="bloc-container">
  <div class="bloc"></div>
</div>

CSS

div.bloc-container {
  background-color: #D5CEFA;
  width: 300px;
  height:250px;
  display: inline-block;
}

div.bloc {
  background-color: #CEFAD5;
  width: 150px;
  height: 125px;
  margin: auto;

  transition: transform 0.2s ease-in;
}

div.bloc:active {
  transform        : scale(0.6);
  -moz-transform   : scale(0.6);
    -o-transform     : scale(0.6);
    -webkit-transform: scale(0.6);
}

我使用以下 Javascript 代码(在 Codepen 中有评论):

$(document).ready(function() {
  var blocs = $('.bloc');

  blocs.bind('mousedown', function() {
    blocs.css('transform', 'scale(0.6)');
  });

  blocs.bind('mouseup', function() {
    blocs.css('transform', 'scale(1)');
  });
});

但我想知道如何仅使用 CSS 来完成。

Answer 1

您正在寻找的东西(选择“表亲”的能力)将需要一个父选择器，它可以让您在再次返回之前向上移动 DOM。不幸的是，CSS 只为后代和 sibling (不是 parent )提供选择器，它们都不能促进您想要的行为。

我认为在这种特殊情况下，JavaScript 是必需的。

• 引用 - CSS3 Selectors