html - 打破 css 对子元素的继承

Question

我对这个场景真的很陌生，到目前为止只处理过基本的东西。我已经四处寻找了 2 天，但没有一个解决方案有效。或者我太笨了，无法很好地执行它们……无论哪种方式，我都处于精神错乱的边缘。

我基本上有一个下拉菜单和一些非常拥挤的 CSS，所以我不会在这里发布它们。这是 jsfiddle http://jsfiddle.net/5k72c/

                <ul>
                    <li><a href="#">ÜRÜNLER</a>
                    <div class="sub1">
                          <ul class="subA">
                            <li><a href="#">Tırmanış Malzemeleri</a></li>
                            <li><a href="#">Kamp Malzemeleri</a></li>
                            <li><a href="#">Çadır</a></li>
                            <li><a href="#">Uyku Tulumu</a></li>
                          </ul>
                          <ul class="subB">
                            <li><a href="#">Üst Giyim</a></li>
                            <li><a href="#">Alt Giyim</a></li>
                            <li><a href="#">Erkek</a></li>
                            <li><a href="#">Kadın</a></li>
                          </ul>
                    </div>
                    </li>
               </ul>

我试过 :before 和 :after 但没有任何改变。我还应用了“>”以仅将继承应用于直接子元素，但这仅部分起作用。如果不为“a”或其他一些标签提供通用样式，我如何才能完全打破继承？

我基本上想要的是，我的下拉菜单完全不同。喜欢这里 http://lafuma.com/en/您看到实际菜单和子下拉菜单有何不同了吗？我知道这是基本的，但让我很生气。

请原谅我写得乱七八糟。我的神经崩溃了，英语不是我的母语。

如有任何帮助，我们将不胜感激。

Answer 1

我会以回答的形式继续这个，因为评论太长了

So i will have to give classes or ids to every single ul and li

不，当然不是。很少需要用“ids 和 classes for everything”来“膨胀”一个人的 HTML 代码——如果你只是更小心地选择选择器。

让我们看一下 your fiddle 中的第一个子菜单链接，带有文本 Tırmanış Malzemeleri 的那个。使用 f.e. 检查Firebug 正如我所建议的那样，我们看到例如 color: #999999 来自带有选择器 .subA li a 的规则显示为“划掉”并有一条线穿过它。那是因为带有选择器 #headwrap > ul li a 的规则定义了不同的 color 值——并且该选择器具有更高的特异性。

#headwrap > ul li a 具有 0,1,0,3 的特异性，而 .subA li a 具有 0,0,1,2 - 所以第一个在这里“获胜”，因此它的颜色值 #FF8000 用于 a元素。

如何解决这个问题？

好吧，要么通过限制当前获胜规则的选择器的“范围”，例如

#headwrap > ul > li > a – 这只会匹配 a 元素，这些元素是 li 的子元素，而 li 是 an 的子元素ul 是 #headwrap 的子项，参见此处:http://jsfiddle.net/5k72c/1/ (我在那里删除了一些您的原始样式，以便更好地了解。)

或者通过将另一个选择器的特异性提高到更高水平(或者至少相同，如果它出现在第一个选择器之后)。 (你的例子在这方面有点次优，因为 ul.subA 元素没有显示，只有 ul.subB 显示 - 所以让我们假设选择器在问题是 .subB li a，http://jsfiddle.net/5k72c/2/ – 在链接 Üst Giyim 上有效，仍然显示为橙色)。

现在，让我们将选择器 .subB li a 更改为 f.e。 #headwrap > ul li .subB li a – 赋予它更高的特异性，并且链接不再是橙色，而是按照规则中的规定变为灰色:http://jsfiddle.net/5k72c/3/ (是的，字体大小和其他属性也不同，但这些是我没有清理的现有样式表的副作用；但这个例子应该足以展示我在那里谈论的基础知识。)