2017-09-22 117 views
-1

我無法讓我的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驗證器進行了檢查,並且不會返回通知或錯誤。

+0

也許他們中的一些在引導中使用,所以你需要使用的重要 –

+1

什麼/在哪裏#div!?和.main-row?我只看到.row和.main-div –

回答

0

在你的html中沒有元素,它有類main-row,也沒有編號div,因爲你已經放在CSS代碼。

+0

我一定已經太累了,謝謝! – SuperUSer

1

在你的代碼中,你的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>