2017-09-22 3 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には、あなたがCSSコードに入れたように、クラスmain-rowもidもdivである要素はありません。

+0

私はあまりにも疲れているに違いないでしょう、ありがとう! – SuperUSer

1

コードでは、クラスmain-divのdivがありますが、CSSではmain-rowを選択します。クラスmain-rowを使用するようにHTMLを変更してみてください。例えば

:!あなたが使用する必要があるので、多分そのうちのいくつかは、ブートストラップに使用されている

<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> 
関連する問題