1

我试图弄清楚是否有一种方法只使用 HTML 和 CSS 在页面内构建响应其他元素的元素，而不是像@media传统响应式设计那样响应浏览器大小。

例如，我有一个 900px 宽的元素。它有时可以包含 1、2 或 3 个子元素。我希望子元素根据兄弟元素的数量来设置和显示其他元素的样式。

例如

<div id="parent">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
</div>

对比

<div id="parent">
    <div class="child"></div>
    <div class="child"></div>
</div>

子元素会以不同的方式出现 - 不同的宽度、不同的填充、边框......而且它们也会有子元素，这些子元素将在第一个示例中隐藏，但在第二个示例中显示。

我知道这可以用 JS、PHP 来完成……但我想看看是否有办法在没有它的情况下做到这一点。由于我还想根据其他子元素的存在来隐藏/显示特定元素，因此使用相对大小（例如 %）不会削减它。

谢谢

4

1 回答 1

3

使用CSS3是可能的，我花了几分钟才弄明白。

查看http://jsfiddle.net/Vdz7s/。

HTML：

<h1>One:</h1>
<div class="parent">
    <div class="child">1</div>
</div>

<h1>Two:</h1>
<div class="parent">
    <div class="child">1</div>
    <div class="child">2</div>
</div>

<h1>Three:</h1>
<div class="parent">
    <div class="child">1</div>
    <div class="child">2</div>
    <div class="child">3</div>
</div>​

CSS：

.parent .child:nth-last-child(1)
{
    border:1px solid yellow;
}

.parent .child:nth-last-child(2),
.parent .child:nth-last-child(2) ~ .child
{
    border:1px solid orange;
}

.parent .child:nth-last-child(3),
.parent .child:nth-last-child(3) ~ .child
{
    border:1px solid red;
}
​

我认为代码是不言自明的，那么你只需要针对孩子，对他们做任何你想做的事情。

于 2012-11-01T01:07:09.877 回答