Question

我有以下布局：

＆＃13;

<!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>

＆＃13;

只有当第二个div低于第一个div时才会选择纯CSS方式吗？（当视口大小降至800-ish px以下时就是这种情况）

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

我知道我可以使用媒体查询将一个div放在另一个div之下，但是我不知道div中有多少内容，所以这不是一个选项。< / p>

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

编辑我在谈论视觉表现。

Answer 1

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

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

See this demo

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

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

Answer 2

你可以使用：nth-child（）选择器

轻松完成

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

＆＃13;

<!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>

＆＃13;

Answer 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;
}

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

3 个答案: