只有在视觉上位于另一个元素下方时，我才能使用 CSS 选择一个元素吗？答案

【问题标题】：Can I select an element using CSS only if it is visually below another element?只有在视觉上位于另一个元素下方时，我才能使用 CSS 选择一个元素吗？
【发布时间】：2015-08-19 17:54:23
【问题描述】：

我有以下布局：

<!doctype html>
<html lang="en">
<head>
    <style>
        html{
            font-family: "Trebuchet MS", Helvetica, sans-serif;
            color: white;
        }
        .outer{
            /*Maybe something here?*/
        }

        .inner_1{
            background-color: aquamarine;
            display: inline-block;
            width: 400px; /*(For testing)*/
        }

        .inner_2{
            background-color: mediumaquamarine;
            display: inline-block;
            width: 400px; /*For testing*/
        }

        /*or Something like this?*/
        /*inner_1:below{
            background-color:red;
        }*/

    </style>
</head>
<body>
<div class="outer">
    <div class="inner_1">
        <p>This is inner_1. Some Content goes here</p>
    </div>
    <div class="inner_2">
        <p>This should be red if it is <b>below</b> inner_1</p>
    </div>
</div>


</body>
</html>

只有当第二个div 低于第一个div 时，是否有纯CSS 方法来选择它？（当视口大小下降到 800 像素以下时就是这种情况）

我只想将颜色（或任何 CSS 属性）应用于第二个 div，前提是它低于第一个 div。

我知道我可以使用媒体查询将一个 div 放在另一个 div 的下方并对其应用样式，但我不知道 div 中会有多少内容，所以这不是一种选择。

有什么想法吗？请告诉我。

编辑我说的是视觉表现。

【问题讨论】：

视觉结构或 DOM 中的“下方”是什么意思？
不，你不能。这正是媒体查询的用途。
如何查询换行符？我不知道换行的宽度是多少。

标签： html css

【解决方案1】：

是的，你可以。在 CSS 中使用 + 选择器

.inner_1 + .inner_2 p {
    border: solid red 1px;
}

See this demo

元素+元素选择器用于选择紧跟在第一个指定元素之后（而不是内部）的元素。

http://www.w3schools.com/cssref/sel_element_pluss.asp

【讨论】：

我几乎 100% 确定问题不是关于 DOM 结构，而是关于视觉表示。
我说的确实是视觉表现。
@ClaasM。那么不，如果没有媒体查询，您将无法做到这一点。
如果我不知道两个 div 的宽度，我将如何查询这样的内容？
@ClaasM。错过了关于内容的部分。 Javascript 绝对不是一个选项？

【解决方案2】：

您可以使用 :nth-child() 选择器轻松完成

.outer div:nth-child(2){background:red !important;}

<!doctype html>
<html lang="en">
<head>
    <style>
        html{
            font-family: "Trebuchet MS", Helvetica, sans-serif;
            color: white;
        }
        .outer{
            /*Maybe something here?*/
        }

        .inner_1{
            background-color: aquamarine;
            display: inline-block;
            width: 400px; /*(For testing)*/
        }

        .inner_2{
            background-color: mediumaquamarine;
            display: inline-block;
            width: 400px; /*For testing*/
        }

        /*or Something like this?*/
        .outer div:nth-child(2){background:red;}

    </style>
</head>
<body>
<div class="outer">
    <div class="inner_1">
        <p>This is inner_1. Some Content goes here</p>
    </div>
    <div class="inner_2">
        <p>This should be red if it is <b>below</b> inner_1</p>
    </div>
</div>


</body>
</html>

【讨论】：

我不是在谈论 DOM，我是在谈论视觉表示。（所以我必须检测两个内部 div 之间是否有换行符）

【解决方案3】：

我现在正在使用 javascript。完整的解决方案可以找到here

function GetAllElementsAt(x, y) {
    var $elements = $("body *").map(function() {
        var $this = $(this);
        var offset = $this.offset();
        var l = offset.left;
        var t = offset.top;
        var h = $this.height();
        var w = $this.width();

        var maxx = l + w;
        var maxy = t + h;

        return (y <= maxy && y >= t) && (x <= maxx && x >= l) ? $this : null;
    });

    return $elements;
}

【讨论】：