我們直接看例子然后在來解釋用法。
<!DOCTYPE html>
<html>
<head>
<style>
input[type="checkbox"]+p:before{
content:"臺(tái)詞：";
}
</style>
</head>
<body>
<input type="checkbox"/><p>我是唐老鴨。</p>
<p>我住在 Duckburg。</p>
<p><b>注釋：</b>對在 IE8 中工作的 :before，必須聲明 DOCTYPE。</p>
</body>
</html>
頁面效果顯示以下：
我們來解釋1下下面這個(gè)css寫法的用處
input[type="checkbox"]+p:before{
content:"臺(tái)詞：";
}
它只會(huì)在checkbox 緊接著的第1個(gè)標(biāo)簽為p的段落加上“臺(tái)詞” 這兩個(gè)字
這里有個(gè) + 和：before的用法，+ 這里理解為and的意思，即input[type="checkbox"] 且 第1個(gè)p 才會(huì)加上樣式
第2個(gè)例子
看樣式寫法。
.dataTables_wrapper .row:first-child {
padding: 12px 0px 4px;
margin: 0px 0px;
background-color: #eff3f8;
}
這個(gè)樣式只會(huì)對第1個(gè)th 起作用，第2個(gè)th是不起作用的，同時(shí) 最后1個(gè)可以這樣寫.dataTables_wrapper .row:last-child
第3個(gè)例子。
用css樣式畫1個(gè)圓
div
{
background-color: #000;
color: #fff;
border: 2px solid #fff;
border-radius: 32px;
height: 24px;
width: 24px;
}
程序員人生，我編程，我富裕，記住wfuyu網(wǎng)，php教程，php學(xué)習(xí)，php手冊，CMS模版制作
聲明：本站大部分內(nèi)容是作者原創(chuàng)，少部分收集于互聯(lián)網(wǎng)供大家一起學(xué)習(xí)，原版權(quán)很多不明，如有侵權(quán)請聯(lián)系本站，謝謝！
粵ICP備14040726號-1?? 2015-2020 程序員人生 版權(quán)所有
