CSS：将特定的CSS添加到<li>元素</li>

Question

我希望<li>内有一个<ul>，我不希望受影响列表中其余<li>元素的CSS影响。

我正在尝试向订单项元素添加ID或类，但我无法找出正确的语法来执行此操作：

<li id="submit">
  <button id="seSubmitButton" class="btn btn-success" data-placeholder="SUBMIT">
    SUBMIT
  </button>
</li>

影响这一点的css就在这里：

.dropdown-menu>li:hover {
  background-color: #f2c2c2;
}

我在这里试了好几件事：

.dropdown-menu>li>submit :hover {
  background-color: #a2a2a2;
}

喜欢.dropdown-menu>li submit或.li submit

但它没有捡到它。我的CSS使用了特定的<li>特定语法，我做错了什么？

Answer 1

您将使用选择器li#submit，因为li元素的id为submit：

Example Here

.dropdown-menu>li#submit:hover {
  background-color: #a2a2a2;
}

---

在设置您要覆盖的初始样式时，您还可以使用:not() pseudo class取消li#submit元素：

Example Here

.dropdown-menu>li:not(#submit):hover {
  background-color: #f2c2c2;
}

Answer 2

添加ID后，您可以在样式表中使用它来处理元素：

#id {
    background-color: #f2c2c2;
}
#id:hover {
     /* some style */
}

Answer 3

在使用#时，您应该在使用id和点（.）时使用class。

代表

 #idName {
    /* css propery here */
    }

为班级

.className {
    /* css propery here */
}