Question

我在设置样式ul和li时遇到问题...我上课是因为其他人正在采用新样式。但是我的课程无法正常运行。

.filter ul {
  font-size: 12px;
  font-family: Helvetica Neue;
  border-radius: 3px;
  border-top: 6px solid #4b7bec;
  border-left: 1px solid #273c75;
  border-right: 1px solid #273c75;
  margin: 0 auto;
  max-width: 750px;
  list-style-type: none;
  padding: 0;
  overflow: hidden;
  background-color: white;
}

.filter .filter-sec > li {
  width: 33.3%;
  border-right: 1px solid #273c75;
  float: left;
}

#no-border {
  border-right: 0;
}

.filter .filter-sec > li a {
  display: block;
  color: #273c75;
  text-align: center;
  padding: 5px 16px;
  text-decoration: none;
}

.filter .filter-sec li a:hover {
  background-color: #44bd32;
  color: white;
  text-decoration: none;
}

<ul class="filter">
              <li class="filter-sec"><a href="#">one</a></li>
              <li class="filter-sec"><a href="#">two</a></li>
              <li class="filter-sec" id="no-border"><a href="#">Three</a></li>
            </ul>

我在这里做错了什么？为什么CSS无法正常工作？

Answer 1

您要放置.filter ul，请注意，.是类选择器。如果要选择<ul>类的filter，则应使用ul.filter

另外，如果您选择<li>，您还将定位到错误的对象。

示例：如果您选择.filter .filter-sec > li a，则.filter li.filter-sec > a会更好，因为您要定位的是.filter类，然后定位<li>和.filter-sec类，那么您重新定位<a>

有关CSS选择器here

的更多信息

检查以下代码段：

ul.filter {
  font-size: 12px;
  font-family: Helvetica Neue;
  border-radius: 3px;
  border-top: 6px solid #4b7bec;
  border-left: 1px solid #273c75;
  border-right: 1px solid #273c75;
  margin: 0 auto;
  max-width: 750px;
  list-style-type: none;
  padding: 0;
  overflow: hidden;
  background-color: white;
}

.filter li.filter-sec {
  width: 33.3%;
  border-right: 1px solid #273c75;
  float: left;
}

#no-border {
  border-right: 0;
}

.filter li.filter-sec > a {
  display: block;
  color: #273c75;
  text-align: center;
  padding: 5px 16px;
  text-decoration: none;
}

.filter li.filter-sec > a:hover {
  background-color: #44bd32;
  color: white;
  text-decoration: none;
}

<ul class="filter">
              <li class="filter-sec"><a href="#">one</a></li>
              <li class="filter-sec"><a href="#">two</a></li>
              <li class="filter-sec" id="no-border"><a href="#">Three</a></li>
</ul>

样式化ul标签和li标签，而不会影响其他ul和li

1 个答案: