Я хочу использовать следующее, чтобы стилизовать только один неупорядоченный список, который у меня есть, вместо всех. Я попытался назначить каждое поле классу и использовать атрибут класса в 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>
Поэтому я хочу, чтобы стиль имел только первый неупорядоченный список. Как мне этого добиться?
Вы можете использовать атрибут: 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>
для стилизации первого элемента неупорядоченного списка вы можете использовать Первый ребенок в своем коде CSS или вы также можете использовать n-й ребенок