Question

我想使用以下内容来设置一个无序列表，而不是所有列表。我试图将每个字段分配给一个类并在html中使用class属性但是我无法使它工作。

＆＃13;

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #C0C0C0;
  border-bottom: solid #008348;
}

li {
  float: left;
}

li a {
  display: block;
  color: #000000;
  font-size: 15px;
  text-align: left;
  padding: 10px 10px;
  text-decoration: none;
  background-color: #C0C0C0;
}

li a:hover {
  background-color: #FFD700;
}

＆＃13;

<ul>
  <li><a class="" href="index.html">Home</a></li>
  <li><a href="mypage1.html">Partners</a></li>
</ul>
<ul>
  <li><a class="" href="index1.html">Main Page</a></li>
  <li><a href="mypage2.html">Partners2</a></li>
</ul>

＆＃13;

所以我只希望第一个无序列表具有样式。我如何实现这一目标？

Answer 1

使用您想要样式的ul的类定义。

＆＃13;

ul.styled {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #C0C0C0;
  border-bottom: solid #008348;
}

ul.styled li {
  float: left;
}

ul.styled li a {
  display: block;
  color: #000000;
  font-size: 15px;
  text-align: left;
  padding: 10px 10px;
  text-decoration: none;
  background-color: #C0C0C0;
}

ul.styled li a:hover {
  background-color: #FFD700;
}

＆＃13;

<ul class="styled">
  <li><a class="" href="index.html">Home</a></li>
  <li><a href="mypage1.html">Partners</a></li>
</ul>
<ul>
  <li><a class="" href="index1.html">Main Page</a></li>
  <li><a href="mypage2.html">Partners2</a></li>
</ul>

＆＃13;

Answer 2

您可以使用ClassesAndSubjects[] | SchoolClass[]或class来定位特定元素。将类/ id应用于id元素时，必须使用父元素定位始终提到的子元素。我相信你已经尝试过不使用下面的父级元素。

ul

上面的代码将定位ul.newclass { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #C0C0C0; border-bottom: solid #008348; } li { float: left; } li a { display: block; color: #000000; font-size: 15px; text-align: left; padding: 10px 10px; text-decoration: none; background-color: #C0C0C0; } li a:hover { background-color: #FFD700; }元素，目标是该类具有ul。但是它会针对所有li元素，因为你没有提到它是父元素。您必须使用下面的特定父元素来定位子元素。

newclass

现在所有ul.newclass { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #C0C0C0; border-bottom: solid #008348; } ul.newclass li { float: left; } ul.newclass li a { display: block; color: #000000; font-size: 15px; text-align: left; padding: 10px 10px; text-decoration: none; background-color: #C0C0C0; } ul.newclass li a:hover { background-color: #FFD700; }和ul元素都将根据ul具有类li来应用。在我的示例中，我使用了.newclass，这意味着它将仅定位具有类ul.newclass的{{1}}元素。假设ul有.newclass类，那将不会影响。

＆＃13;

div

＆＃13;

.newclass

＆＃13;

Answer 3

如果只希望每个无序列表的第一个列表项具有样式，则可以使用：first-child属性。试试这个。

ul li:first-child {
--your styles here--
}

但是，如果要设置第一个无序列表的所有列表项的样式，可以使用它。

ul:first-child li {
--your style here--
}

如何使用样式标签来实现相同类型标签的不同样式？

3 个答案: