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

Question

为什么span元素可以点击，即使它在＆＃34;后面＆＃34; select元素。

jsfiddle

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

因为第一个选项是空的

澄清前面的内容

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

但是选择hello world并且它表现良好

同样有趣:(查看光标变化的位置）

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;