Question

我试图了解CSS。我找到了一个我想要使用的导航菜单，但有些东西还没有工作，而且有很多东西让我感到困惑。

这段代码中有两次li是有原因的吗？

/*Make dropdown links vertical*/
li ul li {
display: block;
float: none;
}

这部分我根本不懂。这是指仅选择器的悬停状态还是指ul，li和选择器的悬停状态？

ul li a:hover + .hidden, .hidden:hover {
display: block;
}

我一直在关注w3schools的css教程，但我没有看到任何可以解释我不理解的事情。完整代码在这里

/*horizontal navigation style*/
/*Strip the ul of padding and list styling*/
ul {
list-style-type:none;
margin:0;
padding:0;
position: absolute;
}
/*Create a horizontal list with spacing*/
li {
display:inline-block;
float: left;
margin-right: 1px;
}
/*Style for menu links*/
li a {
display:block;
min-width:140px;
height: 50px;
text-align: center;
line-height: 50px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #fff;
background: #2f3036;
text-decoration: none;
}
/*Hover state for top level links*/
li:hover a {
background: #19c589;
}
/*Style for dropdown links*/
li:hover ul a {
background: #f3f3f3;
color: #2f3036;
height: 40px;
line-height: 40px;
}
/*Hover state for dropdown links*/
li:hover ul a:hover {
background: #19c589;
color: #fff;
}
/*Hide dropdown links until they are needed*/
li ul {
display: none;
}
/*Make dropdown links vertical*/
li ul li {
display: block;
float: none;
}
/*Prevent text wrapping*/
li ul li a {
width: auto;
min-width: 100px;
padding: 0 20px;
}
/*Display the dropdown on hover*/
ul li a:hover + .hidden, .hidden:hover {
display: block;
}
/*Style 'show menu' label button and hide it by default*/
.show-menu {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
text-decoration: none;
color: #fff;
background: #19c589;
text-align: center;
padding: 10px 0;
display: none;
}
/*Hide checkbox*/
input[type=checkbox]{
display: none;
}
/*Show menu when invisible checkbox is checked*/
input[type=checkbox]:checked ~ #menu{
display: block;
}
/*Responsive Styles*/
@media screen and (max-width : 760px){
    /*Make dropdown links appear inline*/
    ul {
    position: static;
    display: none;
    }
    /*Create vertical spacing*/
    li {
    margin-bottom: 1px;
    }
    /*Make all menu links full width*/
    ul li, li a {
    width: 100%;
    }
    /*Display 'show menu' link*/
    .show-menu {
    display:block;
    }
}

Answer 1

li ul li {
  display: block;
  float: none;
}

这意味着它将定位<li>内的所有li ul元素.css始终应用于表达式中的最后一个选择器。见下面的例子

Stack Snippet

li {
  color: blue;
}

li ul li {
  color: red;
}

<ul>
  <li>Menu
    <ul>
      <li>Submenu</li>
      <li>Submenu</li>
      <li>Submenu</li>
    </ul>
  </li>
</ul>

ul li a:hover + .hidden, 
.hidden:hover {
  display: block;
}

在这里，您使用,（逗号）分隔符...

将相同的样式应用于两个元素

1：使用+即adjacent sibling selector ...它将两个选择器分开，并且仅当第二个元素紧跟第一个元素后才匹配第二个元素，这意味着{{1 }和<a> sholud是相邻的元素。

2： .hidden表示只有当您只悬停.hidden:hover元素时它才会起作用。

.hidden

.hidden {
  display: none;
}

ul li a:hover+.hidden {
  display: inline-block;
  background: red;
}

Answer 2

li ul li {
    display: block;
    float: none;
}

此代码表示有两个列表，其中一个包含另一个首先，li是父母，术语是＆＃39; ul li＆＃39;是它的子列表第一个li是基本菜单，另一个是下拉列表

ul li a:hover + .hidden, .hidden:hover {
    display: block;
}

此代码表示有两种悬停情况一旦徘徊在＆＃34; ul li a＆＃34;这是列表的一部分和他的兄弟姐妹的其他人。隐藏的＆＃39;这里通过使用＆＃34; +＆＃34;来引用它。分配

Answer 3

难以理解，只是将其视为＆＃39; item＆＃39;由空格分隔的＆＃39; ＆＃39;，意思是，每个单词用空格分隔，它是一个项目。然后，看到第一个项目是父母＆＃39;项目，它立即正确的项目是它的孩子（或内部项目），依此类推。

所以，在你的第一个例子中：

 li ul li {
  display: block;
  float: none;
 }

你有li，然后是ul，然后是li，这意味着它正在寻找ul标签内的所有li标签，它在il标签本身内（从右到左阅读）。它会是这样的：

<li>
 <ul>
  <li>this is the selected item</li>
  <li>this is the selected item</li>
  <li>this is the selected item</li>
 </ul>
</li>

对于后一种情况，它是相同的，唯一的区别是使用子类选择器（如hover）和逗号。使用逗号时，意味着您要添加一组新的选择器，这意味着用逗号分隔的选择器在它们之间不以任何方式相关。所以你有两组：

ul li a:hover + .hidden

和

.hidden:hover

第一个意味着＆＃34;选择所有带有.hidden类的项目，即＆＃39; a＆＃39;正在徘徊的标签，这个＆＃39; a＆＃39;标签必须在li标签内，稍后在ul标签内＃34;

它会是这样的：

<ul>
 <li>
  <a>
   <span class="hidden" >this part is selected if mouse hovers</span>
   <span class="hidden" >this don't cause it's not an immediate child </span>
  <a>
 </li>
</ul>

最后第二种情况比较简单，它说（记住，从右到左阅读）＆＃34;选择所有被鼠标悬停的项目和隐藏的类＆＃34;。如果我们使用上面的例子：

<ul>
 <li>
  <a>
   <span class="hidden" >this part is selected if mouse hovers</span>
   <span class="hidden" >this part is selected TOO if mouse hovers </span>
  <a>
 </li>
 <li class="hidden">
  this part is selected TOO if mouse hovers
 </li>
</ul>

希望我自己解释清楚

css多个选择器解释

3 个答案: