我正在为 Odin Project 做一个元素-- 重新创建 Google 主页，让它看起来像它，别无其他。我设计了我的第一个列表 (ul,li) 并且一切顺利。现在我刚开始另一个列表并想在不从第一个列表中获取命令的情况下设置它的样式。我想我用错了“类”。谢谢。
options .ul# {
text-align: right;
list-style-type: none;
margin: 0;
padding: 0;
}
options .li# {
font-size:14px;
padding: 5px;
display: inline;
}
a:link{
text-decoration:none;
color:black;
}
img{
border-radius:15px;
font-family: arial,sans-serif;
}
h1{
text-align:center;
margin-top:160px;
}
h2{
text-align:center;
}
input[type='text'] {
margin-left:375px;
width:500px;
height:50px;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAACrElEQVR42u2Xz2sTQRSAX8VSb1K8iNqKooJH2Ux6Ksn+iPQqxZMIehJB0do/IMhmQWsvHr2KSEGk0tSLIoWIYNUKij20F2/N7iaUZnYT0kYzzhMKs0HDJiTdLcwHDwKZSd63781LBiQSSW9JZdkhzfKm1Rz9mjZp/W9YdEU3vXv4HsQZ40FtNG36q5rls//Ej4tmbSS2T15Mvp3ExOPmEMQNbBtMMEyoljcFcQN7PqyAlqNfIG7gYQ0tYNIaxA1MrJPY3wImbUqBKAXSFv0tBSIVMOkvKRDtGKWN/T6FdqRAxFNoWwpEPIXqUqBT6ALU/UVgu8GW4GD3f6f9TRDYNJTDrk7YbtiqUumHwIYoUJuHERDAS0r4CvgFECgbY+cFAR7KT+g1POmCKFDNw6WggHc3fBtVb4CAoyauBgXIG+g1Xh5mRAGah6cggBd11fK/h7lOprIs0H6uRl6KAo5O7kOv4QmPiwJ4Jqqv4FiwCtXjvD2+tRmfK6kZ/ygI2HritK0rDVGgrClJ6DWMwYC/AGuCBMYcIC2V0CzvjmbRz3j3xUjn6CfeYreUJ2wQkGD75INPX1mFfsEFrrcIYCvdhC4paWQakxajpJMr0C9YFg54i7AsClRmh9/xnr0NHcInzZStk2aLwAcGMAD9pPIazvFKVDD5rdnhJeHLX5RTyRPQHpz5o66emMc9wdlPtvA8wF7Aq2BUHh1525qEo5JtR1WeOXpickO9cJIpyuD6xJmhYiZ5ytWSl3mlnuOaf+2zDaLDXmJrSgZ/MYVEugo+gSh+FkSBa4yd5Ul87DZ5XpFl/AyIEjzYjkau8WqshU2cr13HPbgX4gJOD97n465GZlyVvC9mSKloKI2iTnbwNT+gBX54H+IaXAtxJzE3ycSAFqSAFJACUkAikXD+AHj5/wx2o5osAAAAAElFTkSuQmCC);
background-position: 450px 7px;
background-repeat: no-repeat;
}<!DOCTYPE html>
<head>
<link rel="stylesheet"
type="text/css"
href="style.css">
</head>
<html>
<title>Google</title>
<body>
<div class="options">
<ul>
<li> <a href="button">Gmail</li>
<li> <a href="button">Images</li>
<li> <a href="button"><img src="https://kbdownload1-a.akamaihd.net/tier0/images/article/concept_gry_43x_5n/vox-allapps.svg" width="25" height="25"></li>
<li> <a href="button"><img src="https://d30y9cdsu7xlg0.cloudfront.net/png/338473-200.png"width="25" height="25"></li>
<li> <a href="button"><img src=https://lh3.googleusercontent.com/-gsXjacdjY8E/AAAAAAAAAAI/AAAAAAAAAAA/AI6yGXxkQbqvng1PHA5RhhTLQowbW3ykkQ/s32-c-mo/photo.jpg></li>
</ul>
</div>
<h1><img src=https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png></h1>
<div class="fake-input">
<input type="text"/>
</div>
<div class="buttons">
<ul>
<li><form><input type="submit"name="Google Search"><form></li>
<li><form><input type="submit"name="Google Search"><form></li>
</ul>
</div>
</body>最佳答案
您的 CSS 选择器不正确。为了影响 ul、li 或具有类 .options 的元素内的任何其他元素，选择器需要看起来像 .options li 或您想要设置样式的任何元素。在本例中，li 位于类 .options 的元素中。观看下面的简单示例:
.options li{
background-color: red;
}
.buttons li{
background-color: lime;
}<div class="options">
<ul>
<li>Row 1</li>
<li>Row 2</li>
</ul>
</div>
<div class="buttons">
<ul>
<li>Row 1</li>
<li>Row 2</li>
</ul>
</div>关于HTML/CSS 需要帮助设置两个单独列表的样式，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44892288/