自閉合標(biāo)簽由<和>包圍拘领，不包含任何元素內(nèi)容童太。
在XHTML標(biāo)準(zhǔn)中置媳，自閉合標(biāo)簽還需要在結(jié)尾的標(biāo)記處加上/表示結(jié)束，這模仿了XML中的自閉合標(biāo)簽艘希，后來(lái)到HTML5標(biāo)準(zhǔn)里舍棄了這一沒有意義的規(guī)定硼身。
在HTML5中，不同類型的標(biāo)簽自閉合會(huì)有不同的解析方式：
- 規(guī)范中被設(shè)計(jì)成空標(biāo)簽的標(biāo)簽覆享，如input佳遂，img等，會(huì)被解析成自閉合的標(biāo)簽淹真，用這類標(biāo)簽時(shí)讶迁，即使用一個(gè)結(jié)束標(biāo)簽來(lái)形成閉合標(biāo)簽，后面的結(jié)束標(biāo)簽也會(huì)被忽略掉，例如
<input></input>巍糯，到瀏覽器里看到的還是自閉合的<input> - 包含內(nèi)容的標(biāo)簽啸驯，如div，span等祟峦，會(huì)被解析成
<div></div>罚斗，<span></span>的形式，如果這些標(biāo)簽后面還有其他兄弟元素宅楞，它們會(huì)被包含進(jìn)去针姿，變成子元素
<body>
<div/>
<p></p>
</body>
解析后變成
<body>
<div>
<p></p>
</div>
</body>
由于自閉合標(biāo)簽不包含子元素，在應(yīng)用偽元素(pseudo-element)的時(shí)候會(huì)略微有點(diǎn)麻煩厌衙。
CSS1中的偽元素有::first-letter和::first-line兩種距淫，這兩種偽元素只能應(yīng)用在塊級(jí)元素上，但常用的自閉合標(biāo)簽如input婶希，img都是行內(nèi)元素榕暇，即使是修改display屬性也不起作用，所以不討論這兩種偽元素喻杈。
接下來(lái)重點(diǎn)看CSS2中的兩個(gè)偽元素彤枢，::before和::after，它們可以被應(yīng)用到自閉合標(biāo)簽中筒饰，但也僅限于input[type=checkbox]和input[type=radio]元素缴啡。
input{
position: relative;
}
input::before{
content: '';
height: 18px;
width: 18px;
position: absolute;
background-color: #dddddd;
}
上面的樣式代碼在webkit內(nèi)核瀏覽器（Chrome，Safari瓷们，Opera）中能夠正常顯示业栅，其它瀏覽器都沒有效果。實(shí)際上换棚，加了偽元素之后式镐，偽元素會(huì)被嵌入到input元素中反镇，input也不再是自閉合的了固蚤，如下面所示，
<input>
::before
</input>
如果不考慮其它的瀏覽器歹茶，我們可以直接在input元素上加偽元素來(lái)實(shí)現(xiàn)自定義checkbox和radio button夕玩。
這樣做兼容性不好，其實(shí)我們可以在input的后面加上一個(gè)span元素惊豺，通過(guò)給span元素偽元素來(lái)實(shí)現(xiàn)自定義樣式的checkbox和radio燎孟。
<span class="input-wrapper">
<input type="checkbox">
<span class="input-inner"></span>
</span>
.input-wrapper{
position: relative;
display: inline-block;
height: 18px;
width: 18px;
}
.input-wrapper input[type=checkbox]{
position: absolute;
height: 18px;
width: 18px;
margin: 0;
opacity: 0;
z-index: 1;
}
.input-wrapper .input-inner{
position: absolute;
left: 0px;
height: 18px;
width: 18px;
border: 1px solid #dddddd;
}
.input-wrapper .input-inner::before{
content: '';
height: 12px;
width: 6px;
top: 2px;
left: 5px;
position: absolute;
border-right: 2px solid #4dc86f;
border-bottom: 2px solid #4dc86f;
transform: rotate(45deg);
visibility: hidden;
}
.input-wrapper input[type=checkbox]:checked+.input-inner::before{
visibility: visible
}
span.input-inner元素顯示為正方形選擇框，加上偽元素尸昧，用來(lái)顯示勾選狀態(tài)揩页，通過(guò):checked和+選擇器與input元素聯(lián)動(dòng)，從而實(shí)現(xiàn)自定義樣式的checkbox烹俗。
需要強(qiáng)調(diào)的是這里使用的是visibility這個(gè)屬性控制偽元素的顯示與隱藏爆侣，而是不是用display萍程，原因是操作display會(huì)引起瀏覽器的回流與重繪，但是visibility屬性改變后瀏覽器只用重繪即可兔仰，頻繁操作的情況下使用visibility效率會(huì)更高茫负。
