Question

我正在为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>

Answer 1

您的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需要帮助设计两个单独的列表

1 个答案: