子选择器在CSS中，如何仅针对父项和子项_Css

子选择器在CSS中，如何仅针对父项和子项

css

子选择器在CSS中，如何仅针对父项和子项,css,Css,有点尴尬的是，我无法绕过子选择器。如何在项目列表中定位父列表项目？我尝试了divcontainer>ulli{color:red；}但是它改变了整个项目列表的颜色，我只是想改变父项目的颜色假设我想为所有父列表项指定一个红色，为所有子列表项指定一个蓝色，我该怎么做呢 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Untitle

有点尴尬的是，我无法绕过子选择器。如何在项目列表中定位父列表项目？我尝试了divcontainer>ulli{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>

谢谢

试试这个：

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

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

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

父项的divcontainer>ul>li{color:red；}

divcontainer>ul>li>ul>li{color:blue；}用于子项

我建议您使用一些课程，但请尝试以下方法：

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

是否将子项设置回黑色

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

或者使用ul上的类

我会：

 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>

您可以通过以下方式不添加类来完成此操作

首先，仅为父级设置红色

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

该选择器表示，从左到右读取：选择li，该li是ul的子级，该li是div的子级，该div具有id属性，值为container，并将颜色设置为红色。在这一点上，你会注意到所有的东西都变成了红色。原因是，当您将红色设置为父li时，子ul和li将继承该颜色，这将导致子li的颜色也为红色。所以你必须用下面的方法覆盖它

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

该选择器表示，从左到右读取：选择li，该li是ul的子级，该li是ul的子级，该li是div的子级，该div具有id属性，值为container，并将颜色设置为蓝色。这将覆盖Inheritance。

抱歉，mate它不起作用，除非我做错了什么，否则将再次检查。您必须覆盖子节点颜色。谢谢您的回答，我之所以这样问是因为我认为它只针对ul的列表项，这些项是divcontainer的直接子项。当它更改ul中listitems的颜色时，我很困惑，它是li项的直接子项。如果我错了，请纠正我。你是正确的，但它的子项然后继承该设置。你不能停止继承，你只能用一个实际值覆盖它。否定一个5年前的答案，而不是留下一个理由…干杯，伙计。

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