爲什麼跨度位於選擇可點擊的後面？

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>