我们直接看样例然后在来解释使用方法。
<!DOCTYPE html>
<html> <head> <style>input[type="checkbox"]+p:before{ content:"台词:"; } </style> </head> <body> <input type="checkbox"/><p>我是唐老鸭。</p> <p>我住在 Duckburg。</p>
<p><b>凝视:</b>对于在 IE8 中工作的 :before,必须声明 DOCTYPE。</p>
</body> </html>页面效果显演示样例如以下:
我们来解释一下以下这个css写法的用途
input[type="checkbox"]+p:before{
content:"台词:"; }它仅仅会在checkbox 紧接着的第一个标签为p的段落加上“台词” 这两个字
这里有个 + 和:before的使用方法,+ 这里理解为and的意思,即input[type="checkbox"] 且 第一个p 才会加上样式
第二个样例
看样式写法。
.dataTables_wrapper .row:first-child {
padding: 12px 0px 4px; margin: 0px 0px; background-color: #eff3f8; } 这个样式仅仅会对第一个th 起作用,第二个th是不起作用的。同一时候 最后一个能够这样写.dataTables_wrapper .row:last-child第三个样例。
用css样式画一个圆
div
{ background-color: #000; color: #fff; border: 2px solid #fff; border-radius: 32px; height: 24px; width: 24px; }