css 样式使用方法的累积
我們直接看樣例然后在來(lái)解釋使用方法。
<!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>對(duì)于在 IE8 中工作的 :before，必須聲明 DOCTYPE。
</p>
</body>
</html>
頁(yè)面效果顯演示樣例如以下：
我們來(lái)解釋一下以下這個(gè)css寫法的用途
input[type="checkbox"]+p:before{
content:"臺(tái)詞：";
}???
它僅僅會(huì)在checkbox 緊接著的第一個(gè)標(biāo)簽為p的段落加上“臺(tái)詞” 這兩個(gè)字
這里有個(gè) +? 和：before的使用方法，+ 這里理解為and的意思，即input[type="checkbox"] 且 第一個(gè)p 才會(huì)加上樣式
第二個(gè)樣例
看樣式寫法。
.dataTables_wrapper .row:first-child {
?? ?padding: 12px 0px 4px;
?? ?margin: 0px 0px;
?? ?background-color: #eff3f8;
}
這個(gè)樣式僅僅會(huì)對(duì)第一個(gè)th 起作用，第二個(gè)th是不起作用的。同一時(shí)候 最后一個(gè)能夠這樣寫.dataTables_wrapper .row:last-child
第三個(gè)樣例。
用css樣式畫一個(gè)圓
div
{
background-color: #000;
?? ?color: #fff;
?? ?border: 2px solid #fff;
?? ?border-radius: 32px;
?? ?height: 24px;
?? ?width: 24px;
}
轉(zhuǎn)載于:https://www.cnblogs.com/yangykaifa/p/6718520.html
總結(jié)
以上是生活随笔為你收集整理的css 样式使用方法的累积的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 常见的java异常——java.lang
- 下一篇： ORACLE普通表转换成分区表