是否可以区分 HTML 和 CSS 中的两个相同形状？

Question

我正在尝试以两种不同的方式使用 CSS 操作两个不同的矩形。

假设我有：

.header {
    background-color: #000000;

.rectangle {
    height: 2px;
    width: 100%;

<body>

<div class="header">
    <div class="rectangle"></div>
    <h1>Head</h1>
</div>

    <div class="rectangle"></div>

</body>

我可以在不改变底部矩形的情况下改变顶部矩形吗？例如，是否可以更改顶部矩形而不是底部矩形的大小？

Answer 1

是的，你可以这样做。使用 .header .rectangle 定位 header 内部的矩形 class。希望对您有所帮助！

.rectangle {
  height: 10px;
  background: red;
}

.header .rectangle {
  background: blue;
}

<body>
  <div class="header">
    <div class="rectangle"></div>
    <h1>Head</h1>
  </div>

  <div class="rectangle"></div>

</body>

是否可以区分 HTML 和 CSS 中的两个相同形状？

Is it possible to differentiate between two of the same shape in HTML and CSS?

html

css

shapes