您当前位置：首页 > 互联网 > css 样式用法的累积

css 样式用法的累积

来源：程序员人生发布时间：2014-11-20 08:53:17 阅读次数：2469次

我们直接看例子然后在来解释用法。

<!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>

页面效果显示以下：

我们来解释1下下面这个css写法的用处

input[type="checkbox"]+p:before{
content:"台词：";
}

它只会在checkbox 紧接着的第1个标签为p的段落加上“台词” 这两个字

这里有个 + 和：before的用法，+ 这里理解为and的意思，即input[type="checkbox"] 且第1个p 才会加上样式

第2个例子

看样式写法。

.dataTables_wrapper .row:first-child {
   padding: 12px 0px 4px;
   margin: 0px 0px;
   background-color: #eff3f8;
}
这个样式只会对第1个th 起作用，第2个th是不起作用的，同时最后1个可以这样写.dataTables_wrapper .row:last-child

第3个例子。

用css样式画1个圆

div
{
background-color: #000;
   color: #fff;
   border: 2px solid #fff;
   border-radius: 32px;
   height: 24px;
   width: 24px;
}

生活不易，码农辛苦
如果您觉得本网站对您的学习有所帮助,可以手机扫描二维码进行捐赠
程序员人生

------分隔线----------------------------

上一篇 鞍山&西安现场赛小结

下一篇 ZOJ 3635 Cinema in Akiba（线段树）

分享到:

------分隔线----------------------------

为码而活

积分：4237

15粉丝

7关注

栏目热点