时间戳

首页 > 解决方案 > 选择图像的问题

css - 选择图像的问题

问题描述

很抱歉这个问题很简单。这无论如何都不起作用，我不知道还能做什么。

不应该选择这个图像？我尝试了很多方法来选择它，但它没有被选中。

我可能犯了一个愚蠢的错误。

HTML

<div class="social-media__banner">
    <ul>
        <li>
            <a href="">
                <img id="icon-test" src="images/github.svg" alt="github">
            </a>
        </li>
        <li>
            <a href="">

            </a>
        </li>
        <li>
            <a href="">

            </a>
        </li>
    </ul>
</div>

CSS

.social-media__banner {
  margin-top: 20px;
  position: absolute;
  top:500px;
  left: 0;
  width: 100%;
  height: 200px;
  ul{

    left: 0rem;
    width: 30px;
    display: flex;
    padding: 0;
    li{
      margin: 0 10px;
      list-style: none;
      font-size: 20px;
      padding: 20px 20px;
      color: white;
      a{
        position: relative;
        display: block;
        width: 50px;
        height: 50px;
        background-color: white;
        color: black;
        text-align: center;
        border-radius: 50%;
        overflow: hidden;



      }
    }
  }  
}

#icon-test{
  height: 24px;
  margin-top: 11px;
}

*我检查了检查器工具，它甚至没有选择。

谢谢

标签： csssass

解决方案

如果不是为了清洁，为什么要嵌套所有这些选择器？坚持基础，你就不会出错。您无需.social-media__banner在代码中编写几次即可。

.social-media__banner {
  margin-top: 20px;
  position: absolute;
  top:500px;
  left: 0;
  width: 100%;
  height: 200px;
 } 
.social-media__banner ul{
    left: 0rem;
    width: 30px;
    display: flex;
    padding: 0;
 }
.social-media__banner li{
      margin: 0 10px;
      list-style: none;
      font-size: 20px;
      padding: 20px 20px;
      color: white;
}
.social-media__banner a{
        position: relative;
        display: block;
        width: 50px;
        height: 50px;
        background-color: white;
        color: black;
        text-align: center;
        border-radius: 50%;
        overflow: hidden;
}

#icon-test{
  height: 24px;
  margin-top: 11px;
}
<div class="social-media__banner">
    <ul>
        <li>
            <a href="">
                <img id="icon-test" src="https://miro.medium.com/max/1200/1*mk1-6aYaf_Bes1E3Imhc0A.jpeg" alt="github">
            </a>
        </li>
        <li>
            <a href="">

            </a>
        </li>
        <li>
            <a href="">

            </a>
        </li>
    </ul>
</div>

推荐阅读