div 不显示为弹性框

Question

我在尝试使用以下代码定位的网页中有一个 div，以创建一个 flexbox：

div.my-div-class {
    display: flex;
    flex-wrap: wrap;
}


div.my-div-class > label {
    fl

最初我遇到了用户代理样式覆盖div 并导致它自动显示block 的问题。我通过添加以下代码来修复每个 this question 的问题：

div {
display: inherit;
}

我可能天真地假设这会导致 div “继承”我为类设置的样式。

我查看了控制台，果然看到了：

div { display: inherit; }

而不是之前的用户代理是：

div {display: block;}

我最初认为这会影响我的风格。

我尝试!important 看看这是否至少会引起变化，但它没有。

所以我想我不完全理解 inherit 的行为或如何正确定位这个特定的 div。

有人能解释一下吗？我应该提到这个div被包装在一个表单中，该表单的HTML如下：

<div id="form-container">
<form id="form">
<div class="my-div-class" id ="the-target-div">
/*Rest of the HTML*/
</div>
</form></div>

Answer 1

你的html代码好像没有全部复制，因为中间好像坏了。

如果你想定位这个特定的 div，你应该通过引用它的类或 id 来实现。属性值“继承”仅从其设置为值的父元素继承属性。

例如：

.parentElement {
  display: flex;
  background: yellow;
  height: 200px;
  width: 100%;
}

.childElement {
  display: flex;
  height: 100px;
  width: 70%;
  background: blue;
}

.childElement:hover {
  height: inherit;
}

<div class="parentElement">
  <div class="childElement">
  </div>
</div>

在此示例中，当我们将鼠标悬停在子元素上时，我们将高度值设置为“继承”，它仅继承高度属性的值，但宽度不会改变。

简而言之：如果您希望您的 div 继承他父母拥有的所有样式，您应该将“继承”设置为其父母拥有的每个属性的值。

Answer 2

通常你并不需要定位div标签，你应该使用一个类。

如果您正在创建自己的 CSS 并且不使用某些库（例如 bootstrap），那么最好使用 CSS 重置来确保您正在从头开始编写 CSS。 This is a popular one.

为了回答您的问题，inherit 属性设置了一个 css 属性以从其父级继承值。默认情况下，div 标签是块级元素，因此将任何内容设置为 inherit 下面也会将其设置为 display: block。

只需使用类名来定位您需要灵活的任何内容，例如：

.my-div-class {
  display: flex
}