我想问下否定选择器的使用方法，这里有些不明白
# 具体遇到的问题
这里我使用的是li~li:not(:nth-child(4))这时候我使用了li~li，那不是首页后面的标签的才能实现效果么，那么，我使用nt-child(4)，应该目的地算第一个，机票火车票才是第四个属性，但是为什么是第去旅行没效果呢？
如果我代码里把:nth-child(even)，那么，为什么又能正确的按照顺序显示，目的地为第一个，那么，旅游攻略（2），机票火车票（4），订酒店（6）不会发生样式的改变？
# 报错信息的截图
# 相关课程内容截图
# 尝试过的解决思路和结果
# 粘贴全部相关代码，切记添加代码注释（请勿截图）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
padding:0;
margin:0;
}
ul li{
list-style:none;
}
nav ul{
width:100%;
height:80px;
text-align: center;
background:#e3e4e5;
}
nav ul li{
display:inline-block;
height:80px;
padding:0 20px;
color:black;
background-color: mediumorchid;
line-height:80px;
}
nav ul li~li:not(:nth-child(4)):hover{
box-shadow: 0 -10px 0 0 orange inset;
color:#fff;
}
</style>
</head>
<body>
<nav>
<ul>
<li>首页</li>
<li>目的地</li>
<li>旅游攻略</li>
<li>去旅行</li>
<li>机票火车票</li>
<li>社区</li>
<li>订酒店</li>
<li>社区</li>
</ul>
</nav>
</body>
</html>
在这里输入代码，可通过选择【代码语言】突出显示
正在回答 回答被采纳积分+1
同学你好，问题解答如下：
1. :not表示否定选择器，:not(li)表示不选择li
2. nth-child(n）表示选择第n个元素，n从1开始
3. even表示选择偶数项
4. li~li表示选择第一个li后面的子元素（图1）：
5. li~li:not(:nth-child(4))表示匹配图1红框中的li，并且不是第四个。注意：第一个li是序号是1，排序如下（图2）：
所以效果是1、4没有效果。
6. li~li:not(:nth-child(even)):hover表示匹配图1红框中的li，并且不是偶数，即匹配图1红框中的奇数项。注意：第一个li序号是1，排序同图2。所以1、2没效果，3、5有效果。
祝学习愉快！
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星