CSS：没有功能，没有工作

我对css：not函数有问题

当我将鼠标悬停在链接上时，会在这两个项目下加下划线Item1和Description。我不想在悬停时看到下面的下划线描述

这是我的菜单代码：

<ul>
 <li>
  <a href="#">
     Item 1
     <span>Description</span>
    </a>
 </li>
</ul>

当我将跨度显示更改为内联块时，它工作得很好，但必须是唯一的块。我怎样才能解决它

---

此外，内联块显示项目的描述。我想把它放在商品名称的下面。我该怎么做呢？

你不应该把你的状态（

：hover

）放在选择器前面。因此，您需要将其更改为：

ul li a:not(span):hover { color:blue; text-decoration: underline; }

而且这将不起作用，因为单个元素不能既是

又是

。相反，您只需使用：

span{display:block；}
ul li a:hover{颜色：蓝色；文本装饰：下划线；}
ul li a:hover span{颜色：黑色；文本装饰：无；}

你是在对样式a说：不是（span），a不是span，当然a不是span；）

为此目的使用css类，例如：

span{display:block；}
ul li a:not（.has span）：悬停{颜色：红色；文本装饰：下划线；}

你在对样式a说：不是（span），a不是span，当然a不是span；）有什么解释吗？在对问题的评论中说谢谢，我给了Item Name另一个类，它可以工作。

ul li a:not(span):hover { color:blue; text-decoration: underline; }