Question

我无法让我的CSS在我的页面上运行。这是我的HTML：

import React, { Component } from 'react';

class TestComponent extends Component {

    constructor(props) {
        super(props);
    }
    render() {
        return (
            <div>IT WORKED</div>
        );
    }

}
export default TestComponent;

这是我的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>

问题是它只在我使用标签作为选择器时才有效，例如，如果我设置所有div或正文，如下所示：

.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;
}

但是如果我为类或id使用选择器，它就不起作用。我已经检查过w3schools验证器，它没有返回任何通知或错误。

Answer 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>

Answer 2

在你的html中，没有任何元素包含类main-row，也没有id div，因为你已经放入了css代码。

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

2 个答案: