Question

我添加了一个片段，向您展示了我到达以下位置的情况。

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

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>

Answer 1

通用的同级组合器“〜”分隔两个简单选择器序列。这两个序列所代表的元素在文档树中共享同一父级，而第一个序列所代表的元素在第二个所代表的元素之前（不一定是紧随其后）。

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

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

的兄弟姐妹

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

这个问题的答案很清楚地描述了它：

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

为什么我的CSS ul li〜li不调整我的HTML元素之一？

1 个答案: