您的位置：首页 > Web前端 > CSS

css 样式用法的累积

2014-10-31 16:32 190 查看

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

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

}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航