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

<分区>

我添加了一个片段来向您展示我在下面的位置。

我不明白为什么会出现以下问题...

home 元素与其他导航栏元素一样位于 ul 内。但是为什么 CSS 文件中底部的两个样式正在调整并将样式应用于所有其他元素而不是 home？...

谁能解释一下我哪里出错了..很困惑..

body {
  margin-top: -15px;
  margin-left: 0;
  margin-right: 0;
  font-family: "Arial", serif;
}

img{
  height: 100px;
}

.nav {
  background-color: rgb(0,44,68);
  list-style: none;
  text-align: center;
  padding: 10px 0 2px 0;

}

.nav ul {
  display: flex;
  justify-content: space-around;
  padding: 0;
  align-items: center;
  font-size: 20px;
  font-family: Calendas-Plus;
}

.nav li{
  list-style: none;
  display: inline-block;
}

.nav a {
  color: white;
  text-decoration: none;
}


ul li {
  display: inline-block;
  padding: 0 10px;

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

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>test</title>
    <link rel="stylesheet" href="styling.css" type="text/css">


  </head>
  <body>



<div class="nav">
  <ul>
  <li><a href="/">Home</a></li>
  <li><a href="/">About</a></li>
  <li><a href="/">Products</a></li>
  <li><img src="logo.png"></li>

  <li><a href="/">Services</a></li>
  <li><a href="/">News</a></li>
  <li><a href="/">Contact</a></li>
  </ul>
</div>




  </body>

<script src="app.js" charset="utf-8"></script>

</html>

最佳答案

通用兄弟组合符“~”分隔两个简单选择器序列。两个序列表示的元素在文档树中共享相同的父元素，并且第一个序列表示的元素先于(不一定紧接)第二个序列表示的元素。

所以你正在应用这种风格:

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

仅对具有兄弟元素的 li 元素 <li>在他们面前:

考虑一下:

.a ~ .b {
  background-color: powderblue;
}

<ul>
  <li class="b">1st</li>
  <li class="a">2nd</li>
  <li>3rd</li>
  <li class="b">4th</li>
  <li class="b">5th</li>
</ul>

.a ~ .b匹配第 4 个和第 5 个列表项，因为它们:

是.b元素

是.a的 sibling

出现在.a之后按 HTML 源顺序。

这个问题的答案描述的很清楚:

What does the "~" (tilde/squiggle/twiddle) CSS selector mean?

关于html - 为什么我的 CSS `ul li ~ li` 没有调整我的 HTML 元素之一？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56156587/

上一篇：html - 应格式化两列

下一篇：javascript - 图像，当调整大小时变得模糊而不是被像素化

javascript - 我怎样才能让我的链接在 :hover? 上显示一个小透明框

css - 为什么我的 Sprite 在 iOS/Android 上不工作，但在 Safari/Chrome 上工作正常？

javascript - 如何通过单击图像而不是使用搜索来过滤表格？

html - 如何使用百分比宽度调整边距和填充？

html - 两列布局中 div 下的 div

html - "Mobile" Bootstrap 导航栏不工作

javascript - Jquery Count 复选框选中的位置和父显示 block

html - <h1> 中的行间距太小 : the texts overlap

jquery - Internet Explorer : Bad visualization of CSS Table (table-row, 表格单元格)