Question

我在HTML中有一个类似树的结构，从根开始，我想只使用CSS选择器访问其直接子节点的内容。请注意，我无法控制HTML的结构，所以我无法更改它。

一个例子在这里会有很多帮助。请考虑以下HTML代码：

        <div class="node">
            <div class="children">
                <div class="node">
                    <div class="children">
                        <div class="node">
                            <div class="children">

                            </div>
                            <div class="content">
                                <p class="name">Quarter-Final 1</p>
                            </div>
                        </div>
                    </div>
                    <div class="content">
                        <p class="name">Semi-Final 1</p>
                    </div>
                </div>
                <div class="node">
                    <div class="children">
                        <div class="node">
                            <div class="children">

                            </div>
                            <div class="content">
                                <p class="name">Quarter-Final 2</p>
                            </div>
                        </div>
                    </div>
                    <div class="content">
                        <p class="name">Semi-Final 2</p>
                    </div>
                </div>
            </div>
            <div class="content">
                <p class="name">Final</p>
            </div>
        </div>

我想只获得Semi-Final 1和Semi-Final 2的名字。理想情况下使用一个CSS选择器。怎么做到呢？

谢谢

Answer 1

这些方面的东西（目前仅适用于jQuery，将在CSS4中运行）：

.node > .children > .node > .content > .name:not(.node > .children > .node > .children .content > .name)

树状结构中的CSS选择器

1 个答案: