Question

我正在处理一个非常古老的网站的菜单。该网站仍然以<table>构建，因此整个代码结构有点奇怪。我无法改变格式本身，因此理想情况下解决方案应仅限CSS。

我的菜单是这样构建的：

＆＃13;

<ul id="categorymenu">
  <li class="level1"><a href="#" title="...">Item #1</a></li>
  <li class="level1 active"><a href="#" title="...">Item #2</a></li>
  <li class="level2 active menuselected"><a href="#" title="...">Subitem #1 of Item #2</a></li>
</ul>

＆＃13;

<ul>有6个级别，但它们没有被子<ul>分隔，样式是通过level类处理的。

选择菜单项后，班级active和menuselected将应用于当前选定的项目。如果我深入菜单，班级active仍然会在新<ul>打开的点上（即我从一个导航级别到下一个导航级别的点）。

课程menuselected仅适用于当前选定的项目（以及课程active）。

使用CSS，我在菜单中添加了箭头图形。非active元素具有向右箭头，active元素具有向下箭头，用于表示新打开的菜单级别。

这是我的CSS：

＆＃13;

ul#categorymenu li:not(.active):before {
  content: "";
  border-color: transparent #fff;
  border-style: solid;
  border-width: 0.55em 0 0.55em 0.55em;
  display: inline-block;
  height: 0;
  width: 0;
  left: -0.2em;
  top: 0.75em;
  position: relative;
}

ul#categorymenu li.active:before, ul#categorymenu li.menuselected:before {
  content: "";
  border-color: #fff transparent;
  border-style: solid;
  border-width: 0.55em 0.55em 0 0.55em;
  display: inline-block;
  height: 0;
  width: 0;
  top: 0.6em;
  left: -6px;
  margin-right: -6px;
  position: relative;
}

＆＃13;

除了最后一个元素得到错误的箭头外，它的工作方式完全正确。

如果我一直点击菜单，最后一项将获得向下箭头（因为它同时包含active和menuselected类。

我要做的是编写一条规则，其中包含＆＃34;将正常箭头应用于课程menuselected的所有项目，而不是<li ＆gt; -element与当前元素不同的类＆＃34;。

复杂的CSS选择器：如何选择一个具有两个类的元素，但后面没有同一个类的元素？

0 个答案: