Select 第一个 parent 带或不带容器

Question

我怎么能select只有第一个parents ul（这里有classselectMe），有或没有<div>之间的<nav> 他们呢？我需要在 ul.

中没有任何 class

<nav>
    <ul class="selectMe">
        <li><a>Hello</a></li>
        <li>
            <ul>
                <li><a>World</a></li>
            </ul>
        </li>
    </ul>
    <ul class="selectMe">
        <li><a>Hello</a></li>
        <li>
            <ul>
                <li><a>World</a></li>
            </ul>
        </li>
    </ul>
</nav>

.

<nav>
    <div class="container">
        <ul class="selectMe">
            <li><a>Hello</a></li>
            <li>
                <ul>
                    <li><a>World</a></li>
                </ul>
            </li>
        </ul>
        <ul class="selectMe">
            <li><a>Hello</a></li>
            <li>
                <ul>
                    <li><a>World</a></li>
                </ul>
            </li>
        </ul>
    </div>
</nav>

Answer 1

如果没有 class，您将需要两个选择器：

nav > ul,
nav > div > ul {
  ...
}

>这里是Child Combinator selector，选择的是直接子代。这意味着您的顶级 ul 中包含的内部 ul 将不会被选中。

示例 1（仅限 `nav`）

nav > ul,
nav > div > ul {
  border: 1px dashed #f00;
}

<nav>
    <ul class="selectMe">
        <li><a>Hello</a></li>
        <li>
            <ul>
                <li><a>World</a></li>
            </ul>
        </li>
    </ul>
    <ul class="selectMe">
        <li><a>Hello</a></li>
        <li>
            <ul>
                <li><a>World</a></li>
            </ul>
        </li>
    </ul>
</nav>

示例 2（`nav` 和 `div`）

nav > ul,
nav > div > ul {
  border: 1px dashed #f00;
}

<nav>
    <div class="container">
        <ul class="selectMe">
            <li><a>Hello</a></li>
            <li>
                <ul>
                    <li><a>World</a></li>
                </ul>
            </li>
        </ul>
        <ul class="selectMe">
            <li><a>Hello</a></li>
            <li>
                <ul>
                    <li><a>World</a></li>
                </ul>
            </li>
        </ul>
    </div>
</nav>

In fact I have to select all the ul in top level and not ul in ul

这正是它的作用。在以上两个示例中，只有外部 ul 元素具有边框：

如果两个 ul 元素都被选中，两者都会有边框，并且看起来像这样：

Answer 2

如何为每种情况使用不同的选择器，并将两者结合起来？

情况1: Select只有第一个parents <ul>没有<div>:

nav > ul

请注意，> 表示下一级的 child。

情况 2: Select 只有第一个 parents <ul> 和 <div>:

nav > div > ul

结合两种情况： 您可以通过添加 ,:

来结合使用这两种情况

nav > ul, nav > div > ul

Select 第一个 parent 带或不带容器

Select the first parent with or without container

html

css

css-selectors

示例 1（仅限 `nav`）

示例 2（`nav` 和 `div`）

Select 第一个 parent 带或不带容器

Select the first parent with or without container

html

css

css-selectors

示例 1（仅限 nav）

示例 2（nav 和 div）

示例 1（仅限 `nav`）

示例 2（`nav` 和 `div`）