为什么我的CSS`ul li~ li`没有调整我的HTML元素之一？

我在下面添加了一个片段，向您展示我的目的地

我不明白为什么我有以下问题

• 与其他导航栏元素一样，

  home

  元素位于

  ul

  内部。但是，为什么CSS文件中最下面的两种样式是调整样式并将其应用于所有其他元素，而不是

  home

有人能解释一下我错在哪里吗。。太困惑了

正文{
利润上限：-15px；
左边距：0；
右边距：0；
字体系列：“Arial”，衬线；
}
img{
高度：100px；
}
.导航{
背景色：rgb（0,44,68）；
列表样式：无；
文本对齐：居中；
填充：10px 0 2px 0；
}
美国海军{
显示器：flex；
证明内容：周围的空间；
填充：0；
对齐项目：居中；
字体大小：20px；
字体系列：Calendas Plus；
}
李国荣先生{
列表样式：无；
显示：内联块；
}
.导航a{
颜色：白色；
文字装饰：无；
}
ulli{
显示：内联块；
填充：0 10px；
}
ul li~ li{
右边框：1px纯白；
左边框：1px纯白；
边框顶部：1px纯白；
边框底部：1px纯白；
}

测试

通用同级组合符“~”分隔两个简单选择器序列。两个序列表示的元素在文档树中共享同一父元素，第一个序列表示的元素在第二个序列表示的元素之前（不一定立即）

因此，您正在应用此样式：

ul li ~ li {
  border-right: 1px solid white;
  border-left: 1px solid white;
  border-top: 1px solid white;
  border-bottom: 1px solid white;
}

仅适用于前面有同级

的li元素：

考虑这一点：

.a~.b{
背景色：粉蓝色；
}

第一
第二名
第三
第四
第五

通用同级组合符“~”分隔两个简单选择器序列。两个序列表示的元素在文档树中共享同一父元素，第一个序列表示的元素在第二个序列表示的元素之前（不一定立即）

因此，您正在应用此样式：

ul li ~ li {
  border-right: 1px solid white;
  border-left: 1px solid white;
  border-top: 1px solid white;
  border-bottom: 1px solid white;
}

仅适用于前面有同级

的li元素：

考虑这一点：

.a~.b{
背景色：粉蓝色；
}

第一
第二名
第三
第四
第五

你有什么理由不能用

ul-li

代替

ul-li~li

？不清楚你在问什么。样式完全按照它们应该的方式工作-所有四个边框位置都在“主”元素之后为每个li元素获得一个1px的白色实心边框。如果这不是您想要的，请编辑您的问题以解释您想要的结果。是否有任何原因您不能使用

ul li

而不是

ul li~li

？您的问题不清楚。样式完全按照它们应该的方式工作-所有四个边框位置都在“主”元素之后为每个li元素获得一个1px的白色实心边框。如果这不是你想要的，请编辑你的问题来解释你想要的结果。