Question

我在导航栏上工作。我的一个导航项目有一个下拉列表。对于这个项目，我想禁用正常的链接行为（我已经使用jQuery完成了这个），只需在悬停时打开一个包含三个功能链接的下拉列表。

所有这一切都在功能上有效，但我在样式方面遇到了一些麻烦。

请注意，我使用自动生成导航的CMS，因此我无法使用id定位相关菜单项。

我的菜单如下：

<ul class="header-navigation-list">
    <li class="header-navigation-list-item">
        <a class="header-navigation-link primary-link" href="...">Home</a>
    </li>
    <li class="header-navigation-list-item">
        <a class="header-navigation-link primary-link" href="...">About</a>
    </li>
    <li class="header-navigation-list-item has-dropdown">
        <a class="header-navigation-link primary-link" href="...">Products</a>
        <ul class="header-navigation-list secondary-list" data-is-dropdown>
            <li class="header-navigation-list-item secondary-list-item">
                <a class="header-navigation-link secondary-link" href="...">Product #1</a>
            </li>
            <li class="header-navigation-list-item secondary-list-item">
                <a class="header-navigation-link secondary-link" href="...">Product #2</a>
            </li>
            <li class="header-navigation-list-item secondary-list-item">
                <a class="header-navigation-link secondary-link" href="...">Product #3</a>
            </li>
        </ul>
    </li>
    <li class="header-navigation-list-item">
        <a class="header-navigation-link primary-link" href="...">Blog</a>
    </li>
    <li class="header-navigation-list-item">
        <a class="header-navigation-link primary-link" href="...">Contact</a>
    </li>
</ul>

目标是从＆＃34;产品＆＃34;中删除所有链接样式，但保留＃34;产品＃1 - ＃3＆＃34;的链接样式。

我尝试通过多个CSS规则（例如.header-navigation-list > .has-dropdown或.header-navigation-list > .has-dropdown:first-of-type或.header-navigation-list > .has-dropdown a:first-child）进行定位。问题是，每次我设法定位＆＃34;产品＆＃34;点，我还针对它包含的所有元素，并禁用＃34;产品＃1 - ＃3＆＃34;的链接样式。太

Answer 1

一般建议

编写CSS选择器时的一般性问题是将规则数量保持在合理水平，原因如下：

可读性：应该能够通过阅读其名称来了解该课程的作用
统一语言。每个人都知道从课堂上可以期待什么。
可维护代码：您的选择器不会无意中破坏未知位置的网站。

执行此操作的好方法是使用BEM naming convention

您的案例

但是，由于您似乎无法决定使用哪些类或ID，因此您必须使用所拥有的内容。

这个解决方案非常通用：

.has-dropdown > .primary-link{
    /*Reset styles goes here*/
}

它会选择.has-dropdown的直接子项为.primary-link类的所有元素。有关详细信息，请参阅Mozillas documentation on relationship selectors。

更具体的CSS选择器

使用:nth-child selector的一个示例可能是：

.header-navigation-list > .has-dropdown:nth-child(3) > .primary-link{
  /*CSS rules*/      
}

由于可读性问题，

这是糟糕的做法。

简短摘要

尽可能选择自己的类，最好根据命名约定。如果使用CMS，您可能想要编辑任何主题文件，但除非您打算长时间提供支持，否则我不会推荐它。

尝试完全理解如何使用CSS选择器和伪选择器，以了解样式将应用于哪些元素。

Answer 2

下面的第二个例子可能就是你要找的东西（ jsfiddle：https://jsfiddle.net/pk8gsh9z/ ）：

/**
 * Example 1
 *
 * Targets the direct links of top-most LIs when all of the following are true:
 * - they have a "has-dropdown" class.
 * - they don't have a "secondary-list-item" class.
 */
.header-navigation-list .has-dropdown:not(.secondary-list-item) > a {
  color: brown;
  text-transform: uppercase;
}

/**
 * Example 2
 *
 * Targets the direct links of the third LI when all of the following are true:
 * - it has the "has-dropdown" class
 * - and it doesn't have "secondary-list-item" class
 */
.header-navigation-list .has-dropdown:not(.secondary-list-item):nth-child(3) > a {
  color: green;
}

Answer 3

按类别解决CMS样式

隔离并识别目标。小学是排在最后的。中学是小学的祖先（即父母，父母的父母（祖母）等）
- 主要目标
  - 产品＃1至＃3：li.header-navigation-list-item.secondary-list-item
- 次要目标
  - 产品：li.header-navigation-list-item.has-dropdown（奶奶）
  - [二级清单]：ul.header-navigation-list.secondary-list（妈妈）
确定他们共有哪些类。找出他们的风格属性。这些类是不可触及的，因为它们与每个<ul>和<li>共享。
- 所有<ul>都有.header-navigation-list
  - ul.header-navigation-list {background: black; color: yellow;}✱
- 所有<li>都有.header-navigation-list-item
  - li.header-navigation-list-item没有继承的任务，而不是✱
✱我不知道我任意分配它们的样式是什么。
确定未与每个<ul>或<li>分享的唯一班级或辅助班级
- 主要目标
  - 产品＃1至＃3：.secondary-list-item
- 次要目标
  - 产品：.has-dropdown
  - [二级清单]：.secondary-list
看起来好像已经准备好了3个钩子。
鉴于我们不知道周围的布局，所有的样式表，插件等真实情况是什么。请记住，导航列表布局几乎总是将每个锚点作为唯一的子节点，除了下拉锚点（即li.has-dropdown > a.primary-link），因此首先定位<li>然后降低到锚点级别更容易。因为继承，所以您应该始终先为祖先设置样式，然后专门设置子项的样式以覆盖继承的样式。可能的选择器可能是：

li.has-dropdown > a.primary-link { color:red; font-size:48px; }

li.has-dropdown > ul > li > a { color: yellow; font-size:48px; }
如果您仍有问题，请返回步骤2并对这些通用类进行反调节：
- 如果您发现：
  
  ul.header-navigation-list {background: black; color: yellow;}
- 专柜风格：
  
  ul.header-navigation-list.secondary-list {background:none; color:transparent; } li.header-navigation-list-item.secondary-list-item > a { background: white; color:blue; }

选择类的第一个元素，但不选择其子元素

3 个答案:

一般建议

您的案例

更具体的CSS选择器

简短摘要

按类别解决CMS样式