Как использовать теги стиля для достижения разных стилей с тегами одного типа?

Я хочу использовать следующее, чтобы стилизовать только один неупорядоченный список, который у меня есть, вместо всех. Я попытался назначить каждое поле классу и использовать атрибут класса в html, но мне не удалось заставить его работать.

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

Поэтому я хочу, чтобы стиль имел только первый неупорядоченный список. Как мне этого добиться?

для стилизации первого элемента неупорядоченного списка вы можете использовать Первый ребенок в своем коде CSS или вы также можете использовать n-й ребенок

amir nazari 11.04.2018 13:07
3
1
55
3
Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

Вы можете использовать атрибут: first-child, если хотите, чтобы стиль имел только первый элемент каждого неупорядоченного списка. Попробуй это.

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

Однако, если вы хотите стилизовать все элементы первого неупорядоченного списка, вы можете использовать это.

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

Используйте определение класса для ul, который вы хотите стилизовать.

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;
}
<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>
Ответ принят как подходящий

Вы можете использовать class или 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, нацелен на класс, имеющий newclass. Но он будет нацелен на все элементы li, потому что вы не упомянули его parent. Вы должны нацелить дочерний элемент на конкретный родительский элемент, как показано ниже.

 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 и li будут применяться на основе ul с классом .newclass. В моем примере я использовал ul.newclass, что означает, что он будет нацелен только на элемент ul, имеющий класс .newclass. Предположим, что если у div есть класс .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 class="newclass">
  <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>

Другие вопросы по теме