嵌套类选择器

Question

如果我的 HTML 中有类似的内容

    <div id="top">
        <div class="txt">
            <span class="welcome">Welcome on my website</span>
            <span class="links"><a href="Home">Home</a></span>
        </div>
    </div>

如何在 CSS 中选择欢迎课程。

我尝试过#top.txt.welcome，但不起作用。 我也尝试过#top.txt span.welcome。

Answer 1

#top .txt

不是

#top.txt

后者意味着匹配的元素具有 id 和类，而前者意味着匹配的元素具有类，并且其祖先元素之一具有 id

Answer 2

你可以使用

span.welcome
#top .welcome
#top div.txt span.welcome
.welcome

Answer 3

.welcome

#top div.txt .welcome

div#top div.txt span.welcome

这取决于您想要的具体程度

Answer 4

#top .txt .welcome{}

Answer 5

div#top div.txt span.welcome

或

#top div.txt .welcome

或其他一些变体...

Answer 6

如果您要对特定的跨度标记使用“欢迎”类，则有以下两种方法...

.txt span.welcome

或

span.welcome

两者都可以作为代码中的 CSS 类正常工作。

这就是嵌套类的概念，你可以直接参考下面的参考资料。

参考资料：

• https://www.w3.org/TR/css-nesting-1/