Question

是否可以将div类用于＆gt;或者＆lt;登录CSS？

我遇到的问题是css中的div，我想重命名它只用于一个div而不像现在那样全局。例如：div成“.box {}”和“.box＆gt; div {}”我不知道这些变化的效果如何。

使用的代码：

CSS：

div {
    height: 400px;
    width: 600px;
}

div > div {
    height: 70px;
    position: absolute;
}

.under {
    background: yellow;
    top: 0px;
}

.top {
    background: #008285;
    bottom: -50px;
    top: 330px;
}

.top:hover {
    background: #008285;
    bottom: 100px;
    height: 300px;
    top: 100px;
}

HTML

<div>
<div class="under"><img src="http://oi60.tinypic.com/244xp91.jpg" alt="test"></div>
<div class="top">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. aurabitur ullamcorper ultricies nisi. Nam eget dui.
</div>
</div>

演示：http://jsfiddle.net/yr8zkqvd/2/

Answer 1

我认为您的问题与>无关。您似乎正试图将div 70px设为高，并将图像放入其中。问题是div默认情况下overflow样式设置为visible，这意味着当图片溢出div时，其余部分仍然可见。您需要在样式中添加overflow: hidden以防止这种情况发生。

div > div {
  height: 70px;
  position: absolute;
  overflow: hidden;
}

JSFiddle

Answer 2

如果我理解正确，你会问你是否可以替换这个css规则

div > div {
    height: 70px;
    position: absolute;
}

更精确的东西。

是的，你可以

给你的外部div一个类，也许是'.wrapper`，你可以这样做

.wrapper > .top {
    height: 70px;
    position: absolute;
}

顺便说一下，包装器应该有position:relative

Jsfiddle

然而，事实上，在这个单一实例中，你实际上根本不需要这样做

Reduced CSS JSfiddle

具有“大于或小于”指示符的CSS DIV类

2 个答案: