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

<!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. ZH奶酪：【数据结构与算法】并查集基础

    1.介绍 并查集是一种树型数据结构,用于处理一些不相交集合的合并问题. 并查集主要操作有: (1)合并两个不相交集合: (2)判断两个元素是否属于同一个集合: (3)路径压缩: 2.常用操作 用fat ...

  2. openerp 7.0 来自外部的邮件会发送二次问题解决方法

    插入代码:\addons\mail\mail_mail.py #309 line this = self.pool.get('res.users').browse(cr, uid, uid, cont ...

  3. windows命令行设置IP与DNS

    用dos命令修改IP等本地连接属性 平时我们改IP通常都在是窗口界面本地连接直接修改, 那在命令行也可以设置IP地址?当然可以,这里要用到netsh命令 .点击“开始”->“运行”,输入“cmd ...

  4. Android Bitmap与String互转（转）

    /** * 图片转成string * * @param bitmap * @return */ public static String convertIconToString(Bitmap bitm ...

  5. el表达式 多条件判断

      el表达式 多条件判断 CreationTime--2018年9月13日08点59分 Author:Marydon 1.情景展示 ACCESS_ID == 'APP1039' 且 CARDTYPE ...

  6. python之模块csv之 读取CSV文件(reader和DictReader2个方法)

    # -*- coding: utf-8 -*- #python 27 #xiaodeng #读取CSV文件(reader和DictReader2个方法) import csv #csv文件,是一种常用 ...

  7. java beanUtils框架

    beanUtils是Apache觉得sun公司的内省不够爽,自己又开发了一套可以操作JavaBean的API 所以beanUtils是第三方jar包,使用beanUtils要导包: 在工程目录下新建一 ...

  8. elasticsearch5.4体验

        Elasticsearch是基于Lucene分布式.实时查询的搜索分析引擎.我目前应用在日志集中化处理上... 01.下载elasticsearch5.4 https://www.elasti ...

  9. Spark GraphX 的数据可视化

    概述 Spark GraphX 本身并不提供可视化的支持, 我们通过第三方库 GraphStream 和 Breeze 来实现这一目标 详细 代码下载:http://www.demodashi.com ...

  10. PHP原生：分享一个轻量级的缓存类=>cache.php

    适用:原生PHP cache.php tips:代码最后有适用Demo哦. <?php /* * 缓存类 cache */ define("cacheRoot"," ...