html - 为什么跨度位于选择可点击的后面？

Question

为什么 span 元素是可点击的，即使它位于 select 元素的“后面”。

jsfiddle

span {
    color: red;
    display: block;
}
select {
    font-weight: bold;
    font-size: 15px;
    display: block;
    margin-top: -20px;
}

<span>test test test</span>
<select>
    <option></option>
    <option>hello world</option>
</select>

Answer 1

因为第一个选项为空

澄清一下前面的内容

span {
    color: red;
    display: block;
    background-color: blue;
    cursor: help;
}
select {
    font-weight: bold;
    font-size: 15px;
    display: block;
    margin-top: -20px;
}

<span>test test test</span>
<select>
    <option></option>
    <option>hello world</option>
</select>

但是选择 hello world 就可以了

也很有趣:(看光标在哪里变化)

span {
    color: red;
    display: block;
    background-color: blue;
    cursor: help;
}
select {
    font-weight: bold;
    font-size: 15px;
    display: block;
    margin-top: -20px;
}

<span>test test test</span>
<select>
    <option>........</option>
    <option>hello world</option>
</select>