html - 无法在 CSS 中定位类中的类

Question

我试图在一个类中定位一个类，但它没有效果。

我的尝试:

<style>
.parentclass .childclass ul li a{
    color:red;
    background:black;
}    
</style>

<div class="parentclass">
    <ul class="childclass">
        <li><a href="#">Item 1</a></li>
        <li><a href="#">Item 2</a></li>
    </ul>
</div>

但是，如果我只针对父类，它就可以正常工作。

.parentclass ul li a{
    color:red;
    background:black;
}

有什么我想念的吗？

这是一个 JSFiddle 链接 https://jsfiddle.net/74Laypbq/

Answer 1

CSS:

.parentclass .childclass ul li a{
   color:red;
   background:black;
} 

这实际上意味着什么:
选择所有无序列表元素(<a>)下的所有列表项元素(<li>)下的所有链接(<ul>)，这些元素属于类为.childclass的某个元素，最终属于类为.parentclass的元素。

HTML:

<div class="parentclass">
    <ul class="childclass">
        <li><a href="#">Item 1</a></li>
        <li><a href="#">Item 2</a></li>
    </ul>
</div>

如您所见，问题是类 .childclass 中没有包含无序列表元素 ( <ul> ) 的元素。

取而代之的是一个无序列表元素(<ul>)，类为 .childclass

即。 <ul class="childclass">

因此正确的方法是:

.parentclass ul.childclass li a{
   color:red;
   background:black;
 }

或

.parentclass .childclass li a{
   color:red;
   background:black;
 }

或

.parentclass ul li a{
   color:red;
   background:black;
 }

其中一个可能更适合您的使用，具体取决于您的 html 的其余部分具有哪些其他类和元素以及它们的结构。但是都是正确的方法。