博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
css 样式使用方法的累积
阅读量:5863 次
发布时间:2019-06-19

本文共 792 字,大约阅读时间需要 2 分钟。

我们直接看样例然后在来解释使用方法。

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

你可能感兴趣的文章
【转】蓝牙协议分析(1)_基本概念
查看>>
基于Linux的视频传输系统(上大学时參加的一个大赛的论文)
查看>>
检测到有潜在危险的Request.Form值
查看>>
jQuery Mobile方向感应事件
查看>>
linux 进程(一)---基本概念
查看>>
jsp 相关特性
查看>>
jQuery的deferred对象详解(一)
查看>>
matplotlib绑定到PyQt5(有菜单)
查看>>
数据结构之图(存储结构、遍历)
查看>>
Oracle数据库常见的误操作恢复方法(上)
查看>>
js获取url参数值
查看>>
**15.app后端怎么设计用户登录方案(API权限安全)
查看>>
VM下redhat9.0不能上网
查看>>
Struts2(三)更改字符编码
查看>>
作为刚入职个把星期的小白,表示公司的项目就是复制粘贴,表示很迷茫,这样的话怎么成大牛哇?...
查看>>
WPF异步载入图片,附带载入中动画
查看>>
Android之NDK开发
查看>>
让kbmmw 4.8 支持ios 64
查看>>
CentOS下如何查找大文件
查看>>
android ImageView scaleType属性
查看>>