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>），这些元素属于类{{1最终属于某个具有类.childclass 的元素。

HTML：

.parentclass

您可以看到的问题是，没有类<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">

OR

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

OR

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

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

Answer 3

您将ul定位为.childclass的子元素。试试这个：

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

或只是：

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

Answer 4

从ul取消.parentclass .childclass ul li a即可。

＆＃13;

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

＆＃13;

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

＆＃13;

注意：我从代码中取消.parentclass，因为只有.childclass的一个实例，但如果您在其他.childclass中有GcmBroadcastReceiver，则可能需要它地点，你打算以不同的方式设计它们。

Answer 5

你的CSS需要

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

.childclass附加了ul

根据您所拥有的内容，DOM正在ul之前使用类childclass查找标记，例如：

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

Answer 6

调用班级.childclass已经是你的ul

了

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

或

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

无法在CSS中的类中定位类

6 个答案: