将HTML id更改为class会混淆CSS样式

Question

我想将一些使用id标记的项目更改为一个单独的类，以便在我的CSS中我可以使用.sortsubmenu而不是#sortsongmenu，#sortartistmenu来引用它们，等

问题在于，当我将其中一个从id更改为类时，它会弄乱格式化。在下面的图片中，关于songsubmenu和artistsubmenu的所有内容都是完全相同的，只有使用id识别的songsubmenu和使用class识别的artistsubmenu。

＆＃13;

＆＃13;

#topbar {
	background-color: #222;
}

#topbar_wrapper {
	width: 100%;
	margin: 0 auto;
	text-align: left;
}

#mainmenu {
	list-style-type: none;
	padding: 0px;
	margin: 0px;
	position: relative;
	min-width: 200px;
}

#mainmenu li {
	display: inline-block;
	width: 200px;
}

#mainmenu li:hover {
	background-color: #333;
}

#mainmenu li a {
	color: #CCC;
	display: block;
	padding: 15px;
	text-decoration: none;
}

#mainmenu li:hover > ul {
	display: block;
}

#sortmenu {
	display: none;
	position: absolute;
	background-color: #333;
	border: 5px solid #222;
	border-top: 0;
	margin-left: -5px;
}

#sortmenu > li {
	display: block;
	position: relative;
}

#sortmenu li a:hover {
	color: #699;
}

#sortmenu li:hover ul {
	display: inline-block;
}

#sortsongmenu, .sortsubmenu {
	display: none;
	position: absolute;
	background-color: #333;
	border: 5px solid #222;
	border-left: 0px;
	text-align: right;
	top: 0;
	left: 100%;
	width: 100px;
}

#sortsongmenu li, .sortsubmenu li {
	display: inline;
}

#sortsongmenu li a:hover, .sortsubmenu li a:hover {
	color: #DB7093;
}

＆＃13;

<div id="topbar">
  <div id="topbar_wrapper">
    <ul id="mainmenu">
      <li><a href="#">Home</a>
      </li>
      <li>
        <a href="#">Search</a>
      </li>
      <li>
        <a href="#">Sort By &#9660</a>
        <ul id="sortmenu">
          <li><a href='#'>Song</a>
            <ul id="sortsongmenu">
              <li><a href='#'>A to Z</a>
              </li>
              <li>
                <a href='#'>Z to A</a>
              </li>
            </ul>
          </li>
          <li>
            <a href='#'>Artist</a>
            <ul class="sortsubmenu">
              <li><a href='#'>A to Z</a>
              </li>
              <li>
                <a href='#'>Z to A</a>
              </li>
            </ul>
          </li>
          <li>
            <a href='#'>Album</a>
          </li>
          <li>
            <a href='#'>Genre</a>
          </li>
          <li>
            <a href='#'>BPM</a>
          </li>
          <li>
            <a href='#'>Release Date</a>
          </li>
        </ul>
      </li>
      <li>
        <a href="#">Add Song</a>
      </li>
      <li>
        <a href="#">Contact Us</a>
      </li>
    </ul>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

#mainmenu li规则阻碍了你。它没有被基于类的选择器覆盖，就像基于id的选择器一样。

只保留立即后代的定位/大小，即更改：

#mainmenu li {

到

#mainmenu > li {

一切都很顺利。

＆＃13;

＆＃13;

#topbar {

  background-color: #222;

}

#topbar_wrapper {

  width: 100%;

  margin: 0 auto;

  text-align: left;

}

#mainmenu {

  list-style-type: none;

  padding: 0px;

  margin: 0px;

  position: relative;

  min-width: 200px;

}

#mainmenu > li {

  display: inline-block;

  width: 200px;

}

#mainmenu li:hover {

  background-color: #333;

}

#mainmenu li a {

  color: #CCC;

  display: block;

  padding: 15px;

  text-decoration: none;

}

#mainmenu li:hover > ul {

  display: block;

}

#sortmenu {

  display: none;

  position: absolute;

  background-color: #333;

  border: 5px solid #222;

  border-top: 0;

  margin-left: -5px;

}

#sortmenu > li {

  display: block;

  position: relative;

}

#sortmenu li a:hover {

  color: #699;

}

#sortmenu li:hover ul {

  display: inline-block;

}

#sortsongmenu,

.sortsubmenu {

  display: none;

  position: absolute;

  background-color: #333;

  border: 5px solid #222;

  border-left: 0px;

  text-align: right;

  top: 0;

  left: 100%;

  width: 100px;

}

#sortsongmenu li,

.sortsubmenu li {

  display: inline;

}

#sortsongmenu li a:hover,

.sortsubmenu li a:hover {

  color: #DB7093;

}

＆＃13;

<div id="topbar">
  <div id="topbar_wrapper">
    <ul id="mainmenu">
      <li><a href="#">Home</a>
      </li>
      <li>
        <a href="#">Search</a>
      </li>
      <li>
        <a href="#">Sort By &#9660</a>
        <ul id="sortmenu">
          <li><a href='#'>Song</a>
            <ul id="sortsongmenu">
              <li><a href='#'>A to Z</a>
              </li>
              <li>
                <a href='#'>Z to A</a>
              </li>
            </ul>
          </li>
          <li>
            <a href='#'>Artist</a>
            <ul class="sortsubmenu">
              <li><a href='#'>A to Z</a>
              </li>
              <li>
                <a href='#'>Z to A</a>
              </li>
            </ul>
          </li>
          <li>
            <a href='#'>Album</a>
          </li>
          <li>
            <a href='#'>Genre</a>
          </li>
          <li>
            <a href='#'>BPM</a>
          </li>
          <li>
            <a href='#'>Release Date</a>
          </li>
        </ul>
      </li>
      <li>
        <a href="#">Add Song</a>
      </li>
      <li>
        <a href="#">Contact Us</a>
      </li>
    </ul>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;