Question

我无法听到围绕子选择器的声音，这有点令人尴尬。如何定位项目列表中的父列表项目？我尝试了div#container > ul li{color: red;}，但它改变了整个项目列表的颜色，我只是想改变父项的颜色。

假设我想为所有父列表项指定红色，为所有子列表项指定蓝色，我该怎么做呢？

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
 div#container > ul li{  
   color: red;  

 }  
</style>
</head>

<body>
    <div id="container">  
        <ul>  
            <li> Parent List Item  
                <ul>  
                    <li> Child List Item  </li>  
                </ul>  
            </li>  
            <li> Parent List Item </li>  
            <li> Parent List Item </li>  
            <li> Parent List Item </li>  
        </ul>  
    </div>  
</body>
</html>

谢谢

Answer 1

我愿意：

 div#container ul li{  
   color: red;  
 }
 div#container ul li ul li{  
   color: blue;  
 }

甚至更好，将一个类分配给ul：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
 ul.parentList li{  
   color: red;  
 }
 ul.childList li{  
   color: blue;  
 }
</style>
</head>

<body>
    <div id="container">  
        <ul class='parentList'>  
            <li> Parent List Item  
                <ul class='childList'>    
                    <li> Child List Item  </li>  
                </ul>  
            </li>  
            <li> Parent List Item </li>  
            <li> Parent List Item </li>  
            <li> Parent List Item </li>  
        </ul>  
    </div>  
</body>
</html>

Answer 2

试试这个：

div#container > ul > li{color: red;}

我不确定，但你仍然必须覆盖孩子的颜色。

 div#container > ul > li > ul >li{color: black;}

Answer 3

div＃container＆gt; ul＆gt; li {color：red;}表示父项。

div＃container＆gt; ul＆gt; li＆gt; ul＆gt; li {color：blue;}用于子项。

我建议使用一些课程

Answer 4

试试这个：

 div#container ul li {  /*parent*/
   color: red;  
 } 
 div#container ul li ul li {  /*children*/
   color: black;  
 }

Answer 5

将子项目设置为黑色？

div#container ul li ul li{
    color:black;
}

的 DEMO 的

或使用ul
上的课程
的 DEMO 的

Answer 6

#container li{ color: black; } /* Default <li> style */

#container > ul > li{ color: red; }

Answer 7

您可以在不按以下方式添加课程的情况下完成此操作

首先仅为父

设置红色

div#container > ul > li
{
color: red;
}

这个选择器说，从左到右阅读：选择作为div的孩子的ul的孩子的li，其具有id值为container的属性，并将颜色设置为红色。此时您会注意到所有内容都已变为红色。这样做的原因是，当您将红色的颜色设置为父级li时，子级ul和li会继承颜色，这会导致子级的颜色也变为红色。所以你必须按如下方式覆盖它。

div#container > ul > li > ul > li
{
color: blue;
}

这个选择器说，从左到右阅读：选择作为ul的孩子的ul的孩子，他是ul的孩子，他是div的孩子，div的子属性为id，其值为容器，并将颜色设置为蓝色。这超越了无所作为。

CSS中的子选择器，我如何只定位父项和子项

7 个答案: