个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-11-28 17:10:21 26 4
gpt4 key购买 nike

我无法让我的 CSS 在我的页面上运行。这是我的 html:

<!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 验证器，它没有返回任何通知或错误。

最佳答案

在您的代码中，您有类为 main-div 的 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>

关于jquery - CSS 样式仅适用于不适用于选择器的元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46373752/

26 4 0
文章推荐： python - 将额外的字段添加到现有的 namedtuple 对象并解封
文章推荐： javascript - spin.js/Angular 微调器 : how to position spin into DOM element (plunker demo included)
文章推荐： python - Pandas read_hdf : how to get column names when using chunksize or iterator?
文章推荐： html - 将 Bootstrap 行对齐到部分底部
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com