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

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

}

css 样式使用方法的累积的更多相关文章

  1. JQuery中操作Css样式的方法

    JQuery中操作Css样式的方法//1.获取和设置样式 $("#tow").attr("class")获取ID为tow的class属性 $("#tw ...

  2. 【转发】JQuery中操作Css样式的方法

    JQuery中操作Css样式的方法 //1.获取和设置样式 $("#tow").attr("class")获取ID为tow的class属性 $("#t ...

  3. 重温JavaScript获取CSS样式的方法（兼容各浏览器）

    众所周知,CSS样式有三种类型:行内样式.内部样式和外部样式,JavaScript获取CSS样式时分为两种情况:行内样式获取法 和 非行内样式获取法 . 一.行内样式获取相对简单,通过element. ...

  4. jquery操作css样式的方法

    jquery操作css样式的方法(设置和获取)

  5. html导入css样式的方法

    在html网页中引入css样式表主要有一下四种方法 1.行内引入 <p style="width:100px;height:40px;color:red;"></ ...

  6. 用原生JS读写CSS样式的方法总结

    为了日后方便查询,本人翻阅了一些资料总结了以下方法,仅限原生JS,如有不对的地方欢迎指出!只求大家看完觉得有学到点什么就OK了!   一.可以通过DOM节点对象的style对象(即CSSStyleDe ...

  7. HTML文档中应用css样式的方法总结

    在HTML文档中应用css样式大致有三种方法:1.link标签链接外部样式表:2.使用style元素包含样式表:3.使用style属性,即内联样式 一.link标签链接外部样式表 先看一条较为标准的l ...

  8. JS中获取CSS样式的方法

    1.对于内联样式,可以直接使用ele.style.属性名(当然也可以用键值对的方式)获得.注意在CSS中单词之间用-连接,在JS中要用驼峰命名法 如 <div id="dv" ...

  9. HTML使用CSS样式的方法

      在html网页中引入css样式表主要有一下四种方法 1.行内引入 <p ></p> 2.嵌入式 <style type="text/css"> ...

随机推荐

  1. [置顶] Android之服务器编程

    这个教程主要是讲解服务器编程的,如果你的应用需要和服务器通信,那就必须了解服务器编程(当然,也许你不需要了解,因为你只开发客户端),Android应用和服务器的通信可以使用Http + JSON来通信 ...

  2. ADS ARM 汇编和GNU ARM汇编

    Linux/Unix内核源代码用的编译器是GCC,而GCC采用的是AT&T的汇编格式,这与ADS下使用的汇编格式是不同的. 两种汇编格式的部分对比如下: GNU ARM汇编 ADS ARM汇编 ...

  3. 转：Python yield 使用浅析

    初学 Python 的开发者经常会发现很多 Python 函数中用到了 yield 关键字,然而,带有 yield 的函数执行流程却和普通函数不一样,yield 到底用来做什么,为什么要设计 yiel ...

  4. maven的下载以及安装

    1.下载Maven 打开链接:https://maven.apache.org/download.cgi 下载好之后解压到一个盘,我的是解压到F:\Maven\apache-maven-3.5.3-b ...

  5. cmd获取批处理文件所在路径

    在批处理开头加入cd /d %~dp0 一行代码就真真实实地做到“编写一次,到处运行”.%0是批处理文件本身的路径,%~dp进行扩展, d向前扩展到驱动器,p往后扩展到路径.例如,你的bat文件在e: ...

  6. SettingsEclipse&MyEclipse

      eclipse优化 迁移时间--2017年5月20日09:39:16 CreateTime--2016年11月18日11:27:02 Author:Marydon ModifyTime--2017 ...

  7. JSTL不同版本和EL表达式的关联

    JSTL目前有3个版本:JSTL1.0.JSTL1.1.JSTL1.2 JSTL1.0和JSTL1.1包含jstl.jar和standard.jar这2个jar包,在j2ee4的版本中是需要单独引用这 ...

  8. 新浪API及调用案例

    百度分享:http://pan.baidu.com/s/1uSmku

  9. logging日志管理--将日志打印在屏幕上

    # -*- coding: cp936 -*- # test.py #http://blog.chinaunix.net/uid-27571599-id-3492860.html #logging日志 ...

  10. IP共享重新验证

    大家在进入共享机器的时候,在运行窗口中输入了 \\IP 然后会有账户和密码验证, 有时为了方便选择了记忆密码账号,这样下次就不会再验证了. 但是,有时你当时输入的账户没有你需要打开的某个文件的权限,就 ...