Question

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

这是一个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只为后代和兄弟姐妹（不是父母）提供选择器，这两者都不能促进你想要的行为。

我认为在这种特殊情况下需要JavaScript。

参考 - CSS3 Selectors

Answer 2

您可以在父级中使用:active伪类来执行此操作（或多或少）：

CSS：

#wrapper:active .bloc {
    /* Your code */
}

HTML：

<div id="wrapper">
    <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>
</div>

DEMO

请注意，使用CSS时，您无法始终获得与JS完全相同的行为，因为CSS没有事件。

仅使用CSS3选择非兄弟元素

2 个答案: