html - 为什么如果你在 CSS 中定位一个“表单”元素，属性只适用于第一个子元素，而不是全部？

Question

这就是我的意思。

<div class="drop-down">
    <form action="/action-page.php">
        <label for="cars">Choose a Japanese car:</label>
        <select id="cars" name="cars">
            <option value="Toyota">Toyota</option>
            <option value="Honda">Honda</option>
            <option value="Mitsubishi">Mitsubishi</option>
            <option value="Suzuki">Suzuki</option>
            <option value="Nissan">Nissan</option>
            <option value="Subaru">Subaru</option>
            <option value="Mazda">Mazda</option>
        </select>
        <input type="submit">
    </form>
</div>

和 CSS：

.drop-down {
    background-color:white;
    padding:20px;
    display:inline-block;
    padding-right:70px;
    padding-left:70px;
    font-size:20px;

    }

现在，字体大小仅适用于第一个子元素，即label元素。为什么它不适用于其余的子元素，即selectand input？

我必须分别针对它们来更改它们的字体大小。我认为，如果我以父元素为目标，更改将级联到父元素中的所有文本，但它只会级联到第一个子元素。

这是为什么？

标签： htmlcss

Answer 1

您可以通过为select.

select {
  font-size:20px;
}

如果您希望两者都使用相同的样式，则可以将其添加到类似样式.drop-down, select {}中，但由于标签样式中有填充，这会使情况变得更糟。它将应用于选项，这将使您的下拉列表更大。

.drop-down {
    background-color:white;
    padding:20px;
    display:inline-block;
    padding-right:70px;
    padding-left:70px;
    font-size:20px;
}
select {
  font-size:20px;
}

<div class="drop-down">

        <form action="/action-page.php">

            <label for="cars">Choose a Japanese car:</label>
            <select id="cars" name="cars">
                <option value="Toyota">Toyota</option>
                <option value="Honda">Honda</option>
                <option value="Mitsubishi">Mitsubishi</option>
                <option value="Suzuki">Suzuki</option>
                <option value="Nissan">Nissan</option>
                <option value="Subaru">Subaru</option>
                <option value="Mazda">Mazda</option>
            </select>
            <input type="submit">

        </form>


    </div>