Question

我的DIV上应用了css类，但是DIV中有一些元素需要使用不同的样式。

这是我的DIV。 .elm对其应用基本宽度和高度，该类用于多个DIV。 .large使某些元素具有特定的宽度。

.elm {
    display: block;
    width: 300px;
    height: 38px;
  }

.large {
  width: 450px;
}

.large input, .large textarea {
  width: 400px;
}

.large select  {
  width:190px;
  display: inline;
}

.entry {
  width: 50px;
}
.selection {
  width: 50px;
}

<div class='elm large'>
  <label for="entry">Entry</label>
  <input type='text' id='entry' name='entry' value='' >

  <select id='selection' name='selection'>
  </select>
</div>

<hr>

<div class='elm large'>
  <label for="entry">Entry</label>
  <input class='entry' type='text' id='entry' name='entry' value='' >

  <select class='selection' id='selection' name='selection'>
  </select>
</div>

某些CSS似乎可以正常工作。

我有一个已分配.elm和.large的新div，但是我需要设置输入的宽度，并且选择元素不同。因此，我添加了类.entry和.selection，但它们从未设置为这些值。

有人可以建议我如何正确执行此操作。

Answer 1

这归因于CSS specificity。在.entry更具体且与.large .entry

相同的情况下，防御.large input更具全局性

.elm {
    display: block;
    width: 300px;
    height: 38px;
  }

.large {
  width: 450px;
}

.large input, .large textarea {
  width: 400px;
}

.large select  {
  width:190px;
  display: inline;
}

.large .entry {
  width: 50px;
}

.large .selection {
  width: 50px;
}

<div class='elm large'>
  <label for="entry">Entry</label>
  <input type='text' id='entry' name='entry' value='' >

  <select id='selection' name='selection'>
  </select>
</div>

<hr>

<div class='elm large'>
  <label for="entry">Entry</label>
  <input class='entry' type='text' id='entry' name='entry' value='' >

  <select class='selection' id='selection' name='selection'>
  </select>
</div>

Answer 2

我添加了这个。我已经添加了它们的元素名称和类名称，因此将具有较高的优先级。

div.large input.entry {
width: 50px;}

div.large input .selection {
width: 50px;}

.elm {
        display: block;
        width: 300px;
        height: 38px;
    }

.large {
    width: 450px;
}

.large input, .large textarea {
    width: 400px;
}

.large select  {
    width:190px;
    display: inline;
}



div.large input.entry {
width: 50px;
}
div.large input .selection {
width: 50px;
}

<div class='elm large'>
    <label for="entry">Entry</label>
    <input class='entry' type='text' id='entry' name='entry' value='' >

    <select class='selection' id='selection' name='selection'>
    </select>
</div>

DIV中的CSS样式元素

2 个答案: