如何使嵌套列表不继承其父级样式

问题描述 投票：0回答：1

.filestab ul li {
display: block;
padding-right: 16px;
padding-left: 5px;
width: calc(100% - 1px);
height: 20px;
text-align: left;
font-family: "w95a";
font-size: 12px;
}
.filestab ul li:hover {
background-color: #00007b;
color: #fff;
}
.filestab ul li a {
color: #0000ff;
}
.filestab ul li:hover a {
color: grey;
}
<div class="filestab">
<button class="buttonfilesubmenu"><u>C</u>lick Me!</button>
            <ul class="filesubmenu">
                <li><span>I'm an example submenu!</span></li>
                <li><span>Example</span></li>
                <li><span><a href="">Example with link</a></span></li>
                <li><span>Example</span>
<button class="filepopout1"><img class="invert-image5" src="https://file.garden/ZWlUCY4S7Xz2vypS/themes/windows%2095%20paint/right%20arrow.png"></button>
<ul class="filepop1">
                <li><span><a href="">Example with link</a></span></li>
                <li><span><a href="#">Example with link</a></span></li>
                <li><span>Example</span>
<button class="filepopout2"><img class="invert-image6" src="https://file.garden/ZWlUCY4S7Xz2vypS/themes/windows%2095%20paint/right%20arrow.png"></button>
<ul class="filepop2">
                <li><span><a href="">Example with link</a></span></li>
                <li><span><a href="#">Example with link</a></span></li>
                <li><span>Example</span></li>
                <li><img src="https://file.garden/ZWlUCY4S7Xz2vypS/themes/windows%2095%20paint/paint%2016x16.gif"><span>Example</span></li>
</ul>
</li>
                <li><span>Example</span></li>
</ul>
</li>
                <li><span>Example</span></li>
                <li><span>Example</span></li>
                <li><span>Example</span></li>
                <li><span>Example</span></li>
            </ul>
</div><!-- FILESTAB -->

我的页面上有一些嵌套的列表，但我在按照我想要的方式设置它们的样式时遇到问题。当每个列表项悬停时，我希望该项目的背景是一种颜色，并且文本从黑色变为白色，或从蓝色变为白色，具体取决于它是否是链接。我可以让它正常工作，但我不想要的是当父级悬停在子菜单上时，子菜单的父级会突出显示其中的所有链接。例如，假设我有一个名为“home”的列表项，它会在其中打开一个子列表。我只希望“主页”在悬停时更改其文本和背景颜色，但发生的情况是当“主页”悬停在上面时，子菜单中的每个链接都会更改。我知道为什么会发生这种情况，但我想知道如何阻止它。我已经尝试过关闭初始列表标签，但这不是正确的方法，而且它无论如何都会破坏列表的样式。无论如何我可以实现我想要的吗？我注意到这似乎只有在嵌套链接的开头是一个链接时才会发生。下面是我正在尝试使用的列表的片段。 （我已将链接悬停更改为灰色，这样您就可以看到我在说什么。）

.filestab ul li {
display: block;
padding-right: 16px;
padding-left: 5px;
width: calc(100% - 1px);
height: 20px;
text-align: left;
font-family: "w95a";
font-size: 12px;
}
.filestab ul li:hover {
background-color: #00007b;
color: #fff;
}
.filestab ul li a {
color: #0000ff;
}
.filestab ul li:hover a {
color: #fff;
}

<div class="filestab">
<button class="buttonfilesubmenu"><u>C</u>lick Me!</button>
            <ul class="filesubmenu">
                <li><span>I'm an example submenu!</span></li>
                <li><span>Example</span></li>
                <li><span><a href="">Example with link</a></span></li>
                <li><span>Example</span>
<button class="filepopout1"><img class="invert-image5" src="https://file.garden/ZWlUCY4S7Xz2vypS/themes/windows%2095%20paint/right%20arrow.png"></button>
<ul class="filepop1">
                <li><span><a href="">Example with link</a></span></li>
                <li><span><a href="#">Example with link</a></span></li>
                <li><span>Example</span>
<button class="filepopout2"><img class="invert-image6" src="https://file.garden/ZWlUCY4S7Xz2vypS/themes/windows%2095%20paint/right%20arrow.png"></button>
<ul class="filepop2">
                <li><span><a href="">Example with link</a></span></li>
                <li><span><a href="#">Example with link</a></span></li>
                <li><span>Example</span></li>
                <li><img src="https://file.garden/ZWlUCY4S7Xz2vypS/themes/windows%2095%20paint/paint%2016x16.gif"><span>Example</span></li>
</ul>
</li>
                <li><span>Example</span></li>
</ul>
</li>
                <li><span>Example</span></li>
                <li><span>Example</span></li>
                <li><span>Example</span></li>
                <li><span>Example</span></li>
            </ul>
</div><!-- FILESTAB -->

我几乎尝试了所有我能想到的样式列表和链接的方法，但没有任何效果:(

css
1个回答
0
投票

您的方法存在一些问题...首先您设置 

height
元素的 
li
..尽管它们可能具有不会消耗实际高度的内联内容（跨度），因此它们的容器不会相应地成长。

但更重要的是你想要设计

li
的样式，但副作用会影响它的所有内容。如果您希望仅对列表项旁边列出的名称进行样式设置，则应在 css 选择器中定位该元素。这样，您将确保仅“突出显示”特定标签，而不是包含更深树的整个容器。

另外，由于 

ul li
描述的父关系也将与涉及其间内容的任何树匹配，因此您希望通过执行 
>
使用直接子运算符 
.filestab ul > li > span
来确保您的选择器仅匹配一个类别。

最后，为了给你的标签确定一个非常严格的条件，给定一个

li
，我建议它是第一个孩子，而不是任何孩子，通过做
.filestab ul > li > span:first-child
。

然后按照相同的路线，要区分此类标签何时包含锚点，您可以使用 

:has
伪类 
.filestab ul > li > span:first-child:has(a)
。

在这里我高度简化了你的演示..唯一的副作用是你的一个li没有被样式占用，因为它的跨度不是第一个孩子：

.filestab ul > li {
}

.filestab ul > li > span:first-child {
  display: inline-block;
  padding: .5em 1em;
  cursor: pointer;
  background: lightgray;
}

.filestab ul > li > span:first-child:hover  {
  background: darkgray;
  color: #fff;
}

.filestab ul > li > span:first-child:has(a) {
  background: lightgreen;
}

.filestab ul > li:hover > span:first-child:has(a):hover{
  background: darkgreen;
  color: white;
}

a:visited{
  color: white;

}
<div class="filestab">
  <button class="buttonfilesubmenu"><u>C</u>lick Me!</button>
  <ul class="filesubmenu">
    <li>
      <span>I'm an example submenu!</span>
    </li>
    <li>
      <span>Example</span>
    </li>
    <li>
      <span>
        <a href="">Example with link</a>
      </span>
    </li>
    <li>
      <span>Example</span>
      <button class="filepopout1">
        <img
          class="invert-image5"
          src="https://file.garden/ZWlUCY4S7Xz2vypS/themes/windows%2095%20paint/right%20arrow.png">
      </button>
      <ul class="filepop1">
        <li>
          <span>
            <a href="">Example with link</a>
          </span>
        </li>
        <li>
          <span>
            <a href="#">Example with link</a>
          </span>
        </li>
        <li>
          <span>Example</span>
          <button class="filepopout2">
            <img
              class="invert-image6"
              src="https://file.garden/ZWlUCY4S7Xz2vypS/themes/windows%2095%20paint/right%20arrow.png">           </button>
          <ul class="filepop2">
            <li>
              <span><a href="">Example with link</a></span>
            </li>
            <li>
              <span><a href="#">Example with link</a></span>
            </li>
            <li>
              <span>Example</span>
            </li>
            <li>
              <img src="https://file.garden/ZWlUCY4S7Xz2vypS/themes/windows%2095%20paint/paint%2016x16.gif">
              <span>Example</span>
            </li>
          </ul>
        </li>
        <li>
          <span>Example</span>
        </li>
      </ul>
    </li>
    <li>
      <span>Example</span>
    </li>
    <li>
      <span>Example</span>
    </li>
    <li>
      <span>Example</span>
    </li>
    <li>
      <span>Example</span>
    </li>
  </ul>
</div>
<!-- FILESTAB -->

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.