css多个选择器解释[重复]答案

【问题标题】：css multiple selectors explanation [duplicate]css多个选择器解释[重复]
【发布时间】：2018-02-24 05:15:29
【问题描述】：

我正试图了解 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;
    }
}

【问题讨论】：

请也发布 HTML 代码。以便我们提供帮助。
由于多个选择器可以组合在一起共享同一个声明，选择器必须用逗号分隔。只需查看列表中的最后一个选择器并从右到左阅读。至于不同的模式，这里有一个很好的阅读：w3.org/TR/CSS21/selector.html#pattern-matching

标签： css css-selectors

【解决方案1】：

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

这意味着它将针对li ul中的所有<li>元素..css总是应用于表达式中的最后一个选择器。请参阅下面的示例

堆栈片段

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;
}

在这里，您使用 ,(comma) 分隔符对两个元素应用相同的样式...

1: 使用+ 即adjacent sibling selector...它分隔两个选择器并仅在第二个元素紧跟在第一个元素之后才匹配第二个元素，这里指的是<a> 和.hidden应该是两个相邻的元素。

2: 是.hidden:hover 意味着它只有在你只悬停.hidden 元素时才会起作用。

.hidden {
  display: none;
}

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

<ul>
  <li><a>Hover Here</a><span class="hidden">hidden</span></li>
</ul>

【讨论】：

【解决方案2】：

不难理解，只要把它看成是用空格' '隔开的'items'，意思就是每个单词用空格隔开，就是一个item。然后，看到第一个项目是“父”项目，它是立即正确的项目是它的子项目（或内部项目），依此类推。

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

 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>

对于后一种情况，也是一样的，唯一的区别是使用了子类选择器（如悬停）和逗号。使用逗号时，意味着您要添加一组新的选择器，这意味着用逗号分隔的选择器在它们之间没有任何关系。所以你有两个组：

ul li a:hover + .hidden

和

.hidden:hover

第一个意思是“选择所有带有 .hidden 类的项目，它们是悬停的'a'标签的直接子项（+），并且这个'a'标签必须在一个li标签内，并且这个稍后在 ul 标签内”

应该是这样的：

<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>

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

<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>

希望我自己解释清楚

【讨论】：

【解决方案3】：

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

此代码表示有两个列表，其中一个包括另一个首先， li 是父项，术语“ul li”是它的子列表第一个 li 是基本菜单，另一个是下拉菜单

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

这段代码表示有两种悬停情况悬停在列表中的“ul li a”上时有一次和其他在他的兄弟姐妹 '.hidden' 上使用“+”赋值在这里引用它

【讨论】：