Question

我的css未应用于页面上的特定img id元素。我花了大约30分钟试图弄清楚这件事无济于事。我有2个其他元素与完全相同的html和CSS正确应用。有问题的图片：http://i.imgur.com/Lrtucyo.gif据我所知，其他两张图片就像那张图片一样。

body{
    font-family: 'Montserrat', sans-serif;
  background: url(/img/body_bg.jpg);
  color:#ddd;
  font-weight: 700;
  font size: 30px;


}

.container{
    margin: 0 auto;
}
#blue{
    height:8px;
    background-color: #4eb1ba;
    margin-bottom: 45px;


}
#img{
    border-bottom: 2px solid #4eb1ba;
}


/*BOTTLE*/

}

#spray{
    border: 1px solid #4eb1ba;
}



/*/BOTTLE*/


/*Vacuum*/

#vacuum{
    border: 1px solid   #4eb1ba;
    margin-left: 400px;
    margin-top: -130px;
}



/*Vacuum*/

/*MOP*/

#mop{
    border: 1px solid   #4eb1ba;
    margin-left: 630px;
    margin-top: -130px;


}



#portfolio{

    margin-top:100px;
}









<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="shortcut icon" href="../../assets/ico/favicon.ico">

    <title></title>

    <!-- Bootstrap core CSS -->
    <link href="bootstrap.min.css" rel="stylesheet">
    <link href="style.css" rel="stylesheet">
    <link href='http://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>

    <!-- Just for debugging purposes. Don't actually copy this line! -->
    <!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>

  <body>    
    <div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
      <div class="container">
        <div class="navbar-header">
          <a class="navbar-brand" href="index.html" </a>
        </div>
        <div class="collapse navbar-collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#about">Services</a></li>
            <li><a href="#contact">Get In Touch</a></li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </div>

    <div class="container">
      <div class="row-fluid">
          <h4 class="underline"><span>Recent images</span></h4>
            <img src="img/clean-home1.jpg" width="960" height="540" alt="">
          <div id="portfolio">

            <div class="row-fluid">
              <div class="span4">
                <img src="img/bottle.gif" id="spray" width="180"  height="130">
              </div>

              <div class="row-fluid">
               <div class="span4">
                    <img src="img/vacuum.gif" id="vacuum" width="180"  height="130"></img>
               </div> 

              <div class="row-fluid"> 
               <div class="span3">
                    <img src="img/mop.gif"    id="mop"    width="180"  height="130" ></img>
               </div>
          </div>
        </div>
      </div>
    </div>


    </div><!-- /.container -->



    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script src="../../dist/js/bootstrap.min.js"></script>
  </body>
</html>

Answer 1

在#spray {}规则之前你有一个随机的右括号。不确定这是不是问题，但也许。

Answer 2

在我看到您的代码时，您的HTML代码中没有任何ID为img的元素。我认为您可能希望对所有img元素应用此CSS规则，如果是这样，请将您的#img替换为CSS样式中的img

替换

#img {
    border-bottom: 2px solid #4eb1ba;
}

与

img {
    border-bottom: 2px solid #4eb1ba;
}

CSS未应用于ID

2 个答案: