css怎么选中一个div让另一个div出现,其他隐藏

### 回答1：
要实现这个效果，需要使用CSS中的伪类选择器和CSS属性来控制元素的显示和隐藏。具体步骤如下：

1. 在需要出现和隐藏的元素上加上相应的class名，比如“show-div”和“hide-div”。

2. 使用CSS的伪类选择器:hover来选中需要出现元素的父元素，例如：

.parent-div:hover .show-div{
display:block;
}

3. 使用CSS属性display:none来控制需要隐藏元素的显示，例如：

.hide-div{
display:none;
}

4. 按照上述方法对其他需要隐藏的元素进行设置，例如：

.parent-div:hover .hide-div{
display:none;
}

5. 最后，在HTML中设置需要出现和隐藏的两个div和它们的父元素，并分别加上相应的class名，例如：

<div class="parent-div">
<div class="show-div">这个元素需要出现</div>
<div class="hide-div">这个元素需要隐藏</div>
</div>

通过上述CSS选择器和CSS属性设置，当鼠标移动到父元素上时，需要出现的元素就会显示出来，同时其它需要隐藏的元素也会被隐藏起来。这样就可以实现一个div选中后让另一个div出现，其他元素隐藏的效果了。

### 回答2：
在CSS中选中一个div让另一个div出现并隐藏其他的div可以使用伪类选择器以及CSS3中的属性选择器。

伪类选择器

首先，我们可以使用伪类选择器来控制选中某个div的行为，比如:hover表示鼠标悬停在某个元素上时的状态。

我们可以将一个div标签和一个悬停状态的div标签结合使用，使得原本隐藏的div在鼠标悬停时显示出来。代码如下：

<div class="first"></div>
<div class="second"></div>

CSS代码如下：

.second {
    display: none;
}

.first:hover + .second {
    display: block;
}

在上面的代码中，.second的display属性被设置为none，即隐藏了该元素。而:hover选择器则表示该div当鼠标悬停其中时的状态。+号则表示选中.hover选择器后面的元素，即.second。这样一来，在:first div被鼠标悬停的某一瞬间，.second就会出现。

属性选择器

CSS3中的属性选择器也可以用来达到上面的效果。这种方法比较灵活，可以根据各种属性来选中某个div进行控制。比较常见的属性选择器有[attribute]（选择有某个属性的元素）、[attribute=value]（选择某个属性值等于某个值的元素）等。

比如，我们可以选中一个拥有data-id属性且值为"1"的div，然后使得其他未选中的div隐藏，而选中的这个div则显示出来。代码如下：

<div data-id="1" class="first"></div>
<div data-id="2" class="other"></div>
<div data-id="3" class="other"></div>

CSS代码如下：

.other {
    display: none;
}

[data-id="1"] {
    display: block;
}

在上面的代码中，.other的display属性被设置为none，即隐藏了这两个div。而[data-id="1"]则表示选中拥有data-id属性且值为"1"的元素。这样一来，在data-id="1"的div就会显示出来，而其他的div则会被隐藏起来。

总的来说，以上两种方法虽然各有不同，但都可以有效地选中某个div并根据需要隐藏或显示其他的div。

### 回答3：
要实现这个效果，我们需要利用CSS中的伪类选择器和display属性。

其中，我们可以使用:hover伪类选择器选中一个div，并设置其对应的另一个div的display属性为block，其他的div的display属性为none。这样，当鼠标经过选中的div时，对应的另一个div会出现，其他的div则会隐藏。

具体实现的代码如下：

<div class="parent">
  <div class="item">选中的div</div>
  <div class="content1">要显示的div1</div>
  <div class="content2">要显示的div2</div>
  <div class="content3">要显示的div3</div>
</div>

<style>
  .parent {
    position: relative;
    /*给选中的div添加一个高度，使鼠标能够在其上方悬停*/
    height: 30px;
  }
  .item:hover + .content1,
  .item:hover + .content2,
  .item:hover + .content3 {
    display: block;
  }
  .content1,
  .content2,
  .content3 {
    display: none;
    /*可以添加一些样式，如设置宽度、高度、背景色等*/
  }
</style>

在上述代码中，我们首先定义了一个父容器.parent，其中包含四个子元素，第一个子元素为选中的div.item，其余的三个子元素为要显示的div.content1、div.content2和div.content3。

接着，我们通过CSS中的伪类选择器:hover来选中.item，并在其后面使用+选择器来选中其相邻的另一个div，如.item:hover + .content1，则表示当鼠标在.item上方悬停时，其相邻的.content1会出现。同理，通过.item:hover + .content2和.item:hover + .content3也可以实现对应的效果。

最后，我们利用display属性将要显示的div设置为block，将其他的div设置为none，从而实现了对应的效果。

需要注意的是，在设置.item的样式时，我们要给其添加一个高度，使鼠标能够在其上方悬停，从而触发:hover伪类选择器。而在设置.content1、content2和.content3样式时，我们可以添加一些样式来美化其外观，如设置宽度、高度、背景色等。