如何在css中分离子元素和父元素？

我正在尝试将这两个菜单结合起来：

第一个将保持不变，第二个中的子菜单将与之一起使用。但是当我开始更改css代码并将其合并时，我总是会遇到一个特殊的错误。“responsive retina ready menu”的“ul、li和a”属性影响我从“overlay effect menu”中获取的子菜单，我无法分离这些属性。我的意思是它显示子菜单，因为它与主菜单具有相同的样式。我能怎么办

我有一个：

<div class="main clearfix">
                <nav id="menu" class="nav">                 
                    <ul>
                        <li>
                            <a href="#">
                                <span class="icon">
                                    <i aria-hidden="true" class="icon-home"></i>
                                </span>
                                <span>Menu 1</span>
                            </a><div class="cbp-hrsub">

                        </li>
                        <li>
                            <a href="#">
                                <span class="icon"> 
                                    <i aria-hidden="true" class="icon-services"></i>
                                </span>
                                <span>Menu 2</span>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <span class="icon">
                                    <i aria-hidden="true" class="icon-portfolio"></i>
                                </span>
                                <span>Menu 3</span>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <span class="icon">
                                    <i aria-hidden="true" class="icon-blog"></i>
                                </span>
                                <span>Menu 4</span>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <span class="icon">
                                    <i aria-hidden="true" class="icon-team"></i>
                                </span>
                                <span>Menu 5</span>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <span class="icon">
                                    <i aria-hidden="true" class="icon-contact"></i>
                                </span>
                                <span>Menu 6</span>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <span class="icon">
                                    <i aria-hidden="true" class="icon-contact"></i>
                                </span>
                                <span>Menu 7</span>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <span class="icon">
                                    <i aria-hidden="true" class="icon-contact"></i>
                                </span>
                                <span>Menu 8</span>
                            </a>
                        </li>
                    </ul>
                </nav>
            </div>

我想要的是：

<div class="main clearfix">
        <nav id="menu" class="nav">                 
            <ul>
                <li>
                    <a href="#">
                        <span class="icon">
                            <i aria-hidden="true" class="icon-home"></i>
                        </span>
                        <span>Menu 1</span>
                    </a><div class="cbp-hrsub">
                        <div class="cbp-hrsub-inner"> 
                            <div>
                                <h4>Learning &amp; Games</h4>
                                <ul>
                                    <li><a href="#">Catch the Bullet</a></li>
                                    <li><a href="#">Snoopydoo</a></li>
                                    <li><a href="#">Fallen Angel</a></li>
                                    <li><a href="#">Sui Maker</a></li>
                                    <li><a href="#">Wave Master</a></li>
                                    <li><a href="#">Golf Pro</a></li>
                                </ul>
                            </div>
                            <div>
                                <h4>Utilities</h4>
                                <ul>
                                    <li><a href="#">Gadget Finder</a></li>
                                    <li><a href="#">Green Tree Express</a></li>
                                    <li><a href="#">Green Tree Pro</a></li>
                                    <li><a href="#">Wobbler 3.0</a></li>
                                    <li><a href="#">Coolkid</a></li>
                                </ul>
                            </div>
                            <div>
                                <h4>Education</h4>
                                <ul>
                                    <li><a href="#">Learn Thai</a></li>
                                    <li><a href="#">Math Genius</a></li>
                                    <li><a href="#">Chemokid</a></li>
                                </ul>
                                <h4>Professionals</h4>
                                <ul>
                                    <li><a href="#">Success 1.0</a></li>
                                    <li><a href="#">Moneymaker</a></li>
                                </ul>
                            </div>
                        </div><!-- /cbp-hrsub-inner -->
                    </div>
                </li>
                <li>
                    <a href="#">
                        <span class="icon"> 
                            <i aria-hidden="true" class="icon-services"></i>
                        </span>
                        <span>Menu 2</span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <span class="icon">
                            <i aria-hidden="true" class="icon-portfolio"></i>
                        </span>
                        <span>Menu 3</span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <span class="icon">
                            <i aria-hidden="true" class="icon-blog"></i>
                        </span>
                        <span>Menu 4</span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <span class="icon">
                            <i aria-hidden="true" class="icon-team"></i>
                        </span>
                        <span>Menu 5</span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <span class="icon">
                            <i aria-hidden="true" class="icon-contact"></i>
                        </span>
                        <span>Menu 6</span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <span class="icon">
                            <i aria-hidden="true" class="icon-contact"></i>
                        </span>
                        <span>Menu 7</span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <span class="icon">
                            <i aria-hidden="true" class="icon-contact"></i>
                        </span>
                        <span>Menu 8</span>
                    </a>
                </li>
            </ul>
        </nav>
    </div>

学习及；游戏








公用事业







教育





专业人士

正如我在评论中提到的，您需要分别指定父元素和子元素的样式

例如，为了将

列表样式：none

设置为parent

ul

s，您需要以下CSS选择器：

ul {
    list-style:none;
}

要将默认样式保留为children

ul

s，需要在上一个选择器之后添加以下选择器：

ul ul {
    list-style:disc;
}

---

基于OP中给出的HTML，具有最小的样式，但说明了可以分别为父元素和子元素设置样式的方法。（注意：将鼠标悬停在菜单1上）

为什么不发布相关的CSS/HTML和您尝试过的内容，而不是让其他人为您制作？我不希望任何人为我做任何事情。我只是想学习如何在css中分离父元素和子元素的样式。换句话说，为子元素定义一个私有样式并保护它以获得父样式属性。这样你就有更多的机会得到答案，而不是指望别人来做这份工作或研究每个菜单都是关于什么的。首先，在子菜单中添加一个类或ID可以完成您的工作。我为您所说的代码是无用的，因为子菜单继承了主菜单的“ul，li，a”属性，所以除了一些无意义的代码之外，我没有什么要展示的。正如我在标题中所写的，我真正的问题是“如何在css中分离子元素和父元素，并使其不具有父元素的css属性？”当涉及到子

ul

或

li

时，您可以使用css

：not

。此外，通常可以选择子菜单，如

ul li

，而可以选择父菜单，如

ul li

。如果你不发布一个实际的代码片段，我怀疑你是否能得到答案。它仍然不能解决问题。你能在下午或什么时候联系我吗？@Jenkins请描述一下什么不起作用。SO的目的是帮助未来用户解决相关问题。因此，尽可能全面地描述您的问题（包括相关的代码片段、小提琴、屏幕截图等），父元素的css属性仍然影响子元素。使用您的代码后，我的问题没有任何变化。问题是我没有什么可展示的。但我给出了链接。完整的css就在那里。如果您有时间，您可以检查这两个问题，并告诉我们问题是什么。我要做的任何事