无法将 CSS 添加到 Div 包装锚标记

Question

您好，我正在尝试为我的 'dreams-anchor-wrap' div 添加彩色边框，但由于某种原因似乎无法在其上使用任何 CSS，我不知道为什么。不能将 div 包裹在锚标记周围，然后向其添加 CSS 属性吗？

这是我的沙盒代码的 link： https://codesandbox.io/s/unruffled-jones-0v0xj?file=/src/App.js

Answer 1

您只是在 'dreams-anchor-wrap' div.Correct 上拼错了 className，您的错误应该可以解决

Answer 2

您的 class 名称必须写成“class”，而不是 class姓名。那么就会运行正确。

* {
  margin: 0;
  border: 0;
  padding: 0;
}

.dream-homes-container {
  display: flex;
  justify-content: center;
}

.dream-home-card {
  margin: 0 auto;
  padding: 15px;
  width: 200px;
  height: 100%;
}

.dream-homes-container :last-child {
  padding-right: 0;
}

.dream-home-card img {
  width: 100%;
  height: 70%;
}

.property-info {
  width: 100%;
  color: black;
  padding: 0 0 5px 10px;
}

.dream-home-card a {
  text-decoration: none;
  width: 100%;
}

.num-specs-margin {
  margin-right: 10px;
}

.dream-anchor-wrap {
  border:2px solid blue;
}

.dream-homes-wrap {
  margin-bottom: 50px;
}

 <div class="App">
        <div class="dream-home-card">
          <a href="#">
            <div class="dream-anchor-wrap">
              <img src="https://images.pexels.com/photos/2343466/pexels-photo-2343466.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" />
              <div class="property-info">
                <h4>Pent Suite</h4>
                <div class="property-specs">
                  <i class="fas fa-bed"></i>&nbsp;
                  <span class="num-beds num-specs-margin">4</span>
                  <i class="fas fa-shower "></i>&nbsp;
                  <span class="num-baths num-specs-margin">2</span>
                  <i class="fas fa-car"></i>&nbsp;
                  <span class="num-cars ">2</span>
                </div>
              </div>
            </div>
          </a>
        </div>
      </div>

无法将 CSS 添加到 Div 包装锚标记

Can't add CSS to Div wrapping Anchor tag

css

anchor