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

Я хочу использовать следующее, чтобы стилизовать только один неупорядоченный список, который у меня есть, вместо всех. Я попытался назначить каждое поле классу и использовать атрибут класса в 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
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...
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>

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