无法在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

试试这个:

.parentclass ul.childclass li a

甚至:

.parentclass ul li a

Answer 2

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>

你可以看到的问题是没有带有.childclassunordered-list元素(<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具有的其他类和元素以及它们的结构.但都是正确的方法.