-3

我需要你的帮助：我想反转 a 中<p>元素的顺序<div>。

难点是我不能改HTML，不能给每个p一个类，不能用CSS3，不能加任何JavaScript。

我只能对 CSS 进行更改。

<div id="divID">
    <p>1</p>
    <p>2</p>
</div>
4

2 回答 2

1

CSS 用于样式设置，而不是对标记进行排序......但话虽如此，使用 CSS3，您可以旋转DIV然后单独旋转P元素，这将使它们“以相反的顺序”出现。

这不是很容易访问，像屏幕阅读器之类的东西会以不同的方式阅读您的页面。

http://jsfiddle.net/kzWr8/

div#divID {
transform:rotate(180deg);
-ms-transform:rotate(180deg); /* IE 9 */
-webkit-transform:rotate(180deg); /* Safari and Chrome */
}

#divID p {
transform:rotate(180deg);
-ms-transform:rotate(180deg); /* IE 9 */
-webkit-transform:rotate(180deg); /* Safari and Chrome */
}

更新：带有兄弟选择器的 CSS2 绝对定位：http: //jsfiddle.net/kzWr8/1/

这假设您知道固定数量的元素的高度和数量，以便您可以绝对定位它们。

div#divID {
    position:relative;
}

#divID p {
    border-top: 1px dotted #CCCCCC;
    padding-top: 20px;
    height:40px;
    text-transform: uppercase;
}

#divID > p {
    position:absolute;
    top:60px;
}

#divID > p + p {
    position:absolute;
    top:0;
}
于 2013-08-05T13:28:21.273 回答
0

简短的技术回答：这是不可能的。但是，可以改变订单的显示方式。

CSS 专门用于设置网页样式，仅此而已。直接更改 HTML 将更改顺序。你也可以用 Javascript 来完成这样的事情。然而，CSS 只会使段落看起来改变了位置。这会带来后果。一方面，像搜索引擎这样的爬虫不会注意到定位的变化。此外，屏幕阅读器很可能会阅读它在 HTML 中的内容，这使得页面对于试图访问您页面的人来说非常混乱。

如果您可以不实际重新排列段落，而是让它看起来像您所做的那样，您可能应该检查浮动元素如何使它们出现在不同的位置。据我所知，这仅在某些情况下有效，除非您想使用相对和绝对定位重新定位元素。

例如，如果您使用浮动（即列或链接）将两个元素彼此相邻，则将它们浮动到相对的两侧非常简单（示例）：

.first-element { float: right; }
.second-element { } //whatever

正如@artSx 在下面的评论中指出的那样，我意识到您可能无法在 HTML 中添加类。如果还没有任何类或 ID 可以区分这两个元素，则您必须阅读不同类型的选择器（例如nth-child等等）。

但是，如果您想相对于页面或父 div 完全重新定位元素，您可能需要阅读绝对/相对位置的工作原理以及它们将如何影响页面的流程。

可能有多种方法可以实现这一目标。我们需要一些合法示例来说明您正在尝试做什么，以便为您提供最适合您的情况的方法。

于 2013-08-05T13:18:18.753 回答