Question

我试图创建一个简单的下拉列表。所以我创建了一个这样的列表（使用以下HTML，CSS和JavaScript：

＆＃13;

$(document).ready(function() {

  $("#fSub01").hover(function() {
    $("#sub01").show("fast");
  });

});

＆＃13;

#myList li {
  display: inline-block;
  padding-left: 8px;
  padding-right: 8px;
  background: #D6D6D6;
}

#myList li:hover {
  background: #C4C4C4;
  cursor: pointer;
}

.MySubList {
  display: none;
  position: absolute;
  border: 1px inset grey;
  -webkit-box-shadow: 2px 2px 2px 0px rgba(50, 50, 50, 0.72);
  -moz-box-shadow: 2px 2px 2px 0px rgba(50, 50, 50, 0.72);
  box-shadow: 2px 2px 2px 0px rgba(50, 50, 50, 0.72);
  margin-left: -8px;
}

.MySubList li {
  display: block;
  width: 250px;
  padding-left: 8px;
  padding-right: 8px;
  background: #D6D6D6;
  border-bottom: 1px solid white;
  border-top: 1px solid #c4c4c4;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul id="myList">
  <li id="fSub01">Alunos
    <ul class="MySubList" id="sub01">
      <li>1</li>
      <li>2</li>
    </ul>
  </li>
  <li id="fSub02">Professores
    <ul class="MySubList" id="sub02">
      <li>3</li>
      <li>4</li>
    </ul>
  </li>
</ul>

＆＃13;

我的想法是在使用jQuery悬停时显示子列表。但是，子列表显示为内联而不是块（从上面开始）。

为什么会发生这种情况，我该如何解决？

Answer 1

这完全是关于CSS specificity。您的第一个规则比第二个规则更具体，因此适用。一个简单的修复？只需在您拥有的规则前添加您的ID。

所以：

.MySubList li

变为：

#myList .MySubList li

＆＃13;

  $("#fSub01").hover(function() {
        $("#sub01").show("fast");
    });

＆＃13;

#myList li {
    display:inline-block;
    padding-left:8px;
    padding-right:8px;
    background:#D6D6D6;
}

#myList li:hover {
    background:#C4C4C4;
    cursor:pointer;
}

#myList .MySubList {
    display:none;
    position:absolute;
    border:1px inset grey;
    -webkit-box-shadow: 2px 2px 2px 0px rgba(50, 50, 50, 0.72);
    -moz-box-shadow:    2px 2px 2px 0px rgba(50, 50, 50, 0.72);
    box-shadow:         2px 2px 2px 0px rgba(50, 50, 50, 0.72);
    margin-left:-8px;
}

#myList .MySubList li {
    display:block;
    width:250px;
    padding-left:8px;
    padding-right:8px;
    background:#D6D6D6;
    border-bottom:1px solid white;
    border-top:1px solid #c4c4c4;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul id="myList">
        <li id="fSub01">Alunos
            <ul class="MySubList" id="sub01">
                <li>1</li>
                <li>2</li>
            </ul>
        </li>
        <li id="fSub02">Professores
            <ul class="MySubList" id="sub02">
                <li>3</li>
                <li>4</li>
            </ul>
        </li>
</ul>

＆＃13;

Answer 2

特异性是CSS最常见的概念之一。浏览器必须确定哪个CSS选择器对于DOM节点（也称为HTML元素）比其他节点更重要，以便以一致的方式应用CSS样式。因此，特异性可以明确哪个CSS选择器优先，而您编写的每个选择器都具有自己的特异性。

从选择器的最重要部分到最不重要的部分：

HTML中的内联样式优先于CSS中的样式
ID选择器（#id）
类（.class），属性和伪类选择器
元素选择器

因此，具有一个ID的选择器比具有一个ID的选择器更具体。八个班：

#myDiv { color: blue; }
.one.two.three.four.five.six.seven.eight { color: red; }

文字颜色为蓝色。所以建议：尝试在CSS中仅使用一个特定级别，例如仅使用类而不使用ID。这避免了任何特异性冲突，因为.one.two.three总是会胜过单个.one选择器。

CSS特异性计算器：http://specificity.keegan.st/
有关此问题的推荐文章：http://www.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/

为什么此列表显示为内联？

2 个答案: