CSS样式只适用于不带选择器的元素

问题描述：

我无法让我的CSS在我的页面上运行。这里是我的html：CSS样式只适用于不带选择器的元素

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <title>shubbler.xyz</title> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
    <link href="https://fonts.googleapis.com/css?family=VT323" rel="stylesheet"> 
    <link rel="stylesheet" href="style.css" type="text/css"> 
    </head> 
    <body> 
    <div class="container-fluid"> 
     <nav class="navbar navbar-default"> 
     <div class="container-fluid"> 
      <div class="navbar-header"> 
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> 
       <span class="sr-only">Toggle navigation</span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
      </button> 
      <a class="navbar-brand" style="font-family: 'VT323', monospace; font-size: 20px" href="/">Shubbler.xyz</a> 
      </div> 
      <div id="navbar" class="navbar-collapse collapse"> 
      <ul class="nav navbar-nav"> 
       <li class="active"><a href="/repost/">Repost</a></li> 
       <li><a href="/search/postsearch">Post Search</a></li> 
       <li><a href="/search/itemsearch">Item Search</a></li>   
      </ul> 
      <ul class="nav navbar-nav navbar-right "> 
       <li style="font-family: 'VT323', monospace; font-size: 30px"><a href="/donate">Donations</a></li> 
      </ul> 
      </div><!--/.nav-collapse --> 
     </div><!--/.container-fluid --> 
     </nav> 
     <div class="container"> 
     <a href="/repost/"> 
      <div class="row"> 
      <div class="col-md-12 col-xs-12"> 
       <div class="main-div" style="background-color:lightsalmon;"> 
       <h2><span class="">Repost</span> for /r/GlobalOffensiveTrade</h2> 
       <br> 
       <p>Basically, this will repost your latest Reddit Trade.</p> 
       <p>Sign in with Reddit and confirm the Trade/Store that you want to repost.</p> 
       </div> 
      </div> 
      </div> 
     </a> 
     <a href="/search/postsearch"> 
      <div class="row main-div"> 
      <div class="col-md-12 col-xs-12"> 
       <div style="background-color:lightblue;"> 
       <h2>Post Search for /r/GlobalOffensiveTrade</h2> 
       <br> 
       <p>This feature will allow you to find posts by filtering either have or want.</p> 
       <p>Just search for a post below, check out the items in the post too.</p> 
       </div> 
      </div> 
      </div> 
     </a> 
     <a href="/search/itemsearch"> 
      <div class="row main-div"> 
      <div class="col-md-12 col-xs-12"> 
       <div style="background-color:lightgreen;"> 
       <h2>Item Search for /r/GlobalOffensiveTrade</h2> 
       <br> 
       <p>This feature will allow you to find items posted on /r/GlobalOffensiveTrade.</p> 
       <p>Just search for an item below, feel free to change float criteria too.</p> 
       </div> 
      </div> 
      </div> 
     </a>  
     </div> 
    </div> 
    </body> 
</html>

这里是我的CSS：

.main-row { 
    border-radius: 25px 25px 25px 25px; 
    -moz-border-radius: 25px 25px 25px 25px; 
    -webkit-border-radius: 25px 25px 25px 25px; 
    border: 4px solid #ff03ff; 
    background-color:lightsalmon; 
} 

#div { 
    border-radius: 25px 25px 25px 25px; 
    -moz-border-radius: 25px 25px 25px 25px; 
    -webkit-border-radius: 25px 25px 25px 25px; 
    border: 4px solid #ff03ff; 
    background-color:lightsalmon; 
}

问题是，当我使用标签作为选择，例如，如果我将所有的div或身体，它才能正常运行，像这样：

div { 
    background-color: red; 
}

但是，如果我使用类或id的选择器，它不起作用。我已经与w3schools验证器进行了检查，并且不会返回通知或错误。

也许他们中的一些在引导中使用，所以你需要使用的重要 –

什么/在哪里#div！？和.main-row？我只看到.row和.main-div –

答

在你的html中没有元素，它有类main-row，也没有编号div，因为你已经放在CSS代码。

我一定已经太累了，谢谢！ – SuperUSer

答

在你的代码中，你的div有类main-div，但是在你的CSS中选择main-row。尝试更改您的HTML以使用类main-row。

例如：

<div class="row main-row"> 
    <div class="col-md-12 col-xs-12"> 
    <div style="background-color:lightblue;"> 
     <h2>Post Search for /r/GlobalOffensiveTrade</h2> 
     <br> 
     <p>...</p> 
     <p>...</p> 
    </div> 
    </div> 
</div>

CSS样式只适用于不带选择器的元素

相关推荐