码迷,mamicode.com
首页 > Web开发 > 详细

css 样式用法的累积

时间:2014-10-31 17:22:15      阅读:290      评论:0      收藏:0      [点我收藏+]

标签:style   blog   http   color   ar   for   sp   div   on   

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

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

页面效果显示如下:

bubuko.com,布布扣

我们来解释一下下面这个css写法的用途

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

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

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


第二个例子

bubuko.com,布布扣



看样式写法。

.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;
}






css 样式用法的累积

标签:style   blog   http   color   ar   for   sp   div   on   

原文地址:http://blog.csdn.net/baicp3/article/details/40656739

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!