Question

所以我有一个包含7个ul标记的标题li标记列表，但我想从li个标记之一中删除css设计。

在CSS中基本上看起来像这样：

#stuff ul li {
  margin-left: 7px;
  margin-right: 8px;
  float: left;
  display: block;
  font-size: 24px;
  padding: 25px;
  text-align: center;
}
#stuff ul li:hover {
  display: block;
  background-color: rgba(15, 15, 15, 1);
  color: #FFFFFF;
}

<div id="stuff">
  <ul>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li>
      <img src="pictures/logo.png">
    </li>
    <li><a href="#">5</a></li>
    <li><a href="#">6</a></li>
    <li><a href="#">7</a></li>
  <ul>
</div>

带有图片的li标签也添加了悬停和填充，但这不是我想要的。所以我想知道是否有办法从单个li元素中删除这些函数？

Answer 1

如果知道其位置，您可以合并:nth-child和:not选择器

＆＃13;

#stuff ul li {
         margin-left:7px;
         margin-right:8px;
         float:left;
         display:block;
         font-size:24px;
         padding:25px;
         text-align:center;
    }

#stuff ul li:not(:nth-child(4)):hover {
     display:block;
     background-color:rgba(15,15,15,1);
     color:#FFFFFF;
}

＆＃13;

<div id="stuff">
    <ul>
          <li><a href="#">1</a></li>
          <li><a href="#">2</a></li>
          <li><a href="#">3</a></li>
          <li><img src="pictures/logo.png"></li>
          <li><a href="#">5</a></li>
          <li><a href="#">6</a></li>
          <li><a href="#">7</a></li>
    </ul>
</div>

＆＃13;

如果其位置未知，请向包含该图片的li添加一个班级并使用:not选择器

＆＃13;

#stuff ul li {
         margin-left:7px;
         margin-right:8px;
         float:left;
         display:block;
         font-size:24px;
         padding:25px;
         text-align:center;
    }

#stuff ul li:not(.img):hover {
     display:block;
     background-color:rgba(15,15,15,1);
     color:#FFFFFF;
}

＆＃13;

<div id="stuff">
    <ul>
          <li><a href="#">1</a></li>
          <li><a href="#">2</a></li>
          <li><a href="#">3</a></li>
          <li class="img"><img src="pictures/logo.png"></li>
          <li><a href="#">5</a></li>
          <li><a href="#">6</a></li>
          <li><a href="#">7</a></li>
    </ul>
</div>

＆＃13;

Answer 2

可以尝试这个

#stuff ul li:nth-child(4):hover 
 {
 background-color:transparent;

 }

Answer 3

这将是您最简单的解决方案，只需将新类添加到您需要排除的li中我在这里添加'noHover'类。

<强> HTML

<div id="stuff">
    <ul>
          <li><a href="#">1</a></li>
          <li><a href="#">2</a></li>
          <li><a href="#">3</a></li>
          <li class="noHover"><img src="pictures/logo.png"></li>
          <li><a href="#">5</a></li>
          <li><a href="#">6</a></li>
          <li><a href="#">7</a></li>
    <ul>
</div>

<强> CSS

    #stuff ul li {
         margin-left:7px;
         margin-right:8px;
         float:left;
         display:block;
         font-size:24px;
         padding:25px;
         text-align:center;
    }

#stuff ul li:hover {
     display:block;
     background-color:rgba(15,15,15,1);
     color:#FFFFFF;
}
.noHover:hover{ 
     display:block;
     background-color:inherit !important
 }
}

度过愉快的一天。

从单个li标签中删除内容

3 个答案: