E:target 表示当前的URL片段的元素类型，这个元素必须是E

E:disabled 表示不可点击的表单控件

E:enabled 表示可点击的表单控件

E:checked 表示已选中的checkbox或radio
E::after 生成内容在E元素后

E:not(s) 表示E元素不被匹配

E~F表示E元素毗邻的F元素
E:first-line选中第一行文字
E:first-letter选中第一个字
E::selection 当文字被选中时触发效果【注意是双冒号】
Content 属性：
E:after  利用content属性在元素末尾添加内容
E:before 利用content属性在元素开头添加内容
<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <title>checked伪类与~选择器实现好看选择框效果</title>

    <link rel="stylesheet" href="">

    <style>

        *{margin:0; padding:0;}

        label{

            width:30px;

            height:30px;

            position:relative;

            margin-right:5px;

            float:left;

            overflow:hidden;

        }

        span{float:left; width:30px; height:30px; background:blue; }

        input[type=radio]{

            position:absolute;

            left:-30px;

            top:-30px;

        }

        input:checked~span{

            background:red;

        }

    </style>

</head>

<body>

    <label><input type="radio" name="tab" /><span></span></label>

    <label><input type="radio" name="tab" /><span></span></label>

    <label><input type="radio" name="tab" /><span></span></label>

</body>

</html>

1-3:CSS3课程入门之伪类和伪元素的更多相关文章

  1. 妙味css3课程---1-2、css3中新增的伪类和伪元素有哪些

    妙味css3课程---1-2.css3中新增的伪类和伪元素有哪些 一.总结 一句话总结: 1.div:target{}是什么意思? 比如a标签的锚点链接到div,div:target{}就可以找到这个 ...

  2. css3 -- 伪类与伪元素

    伪类: 1.结构伪类 A:E : first-child{} E : nth-*(n){} E : first-*(even){}  E : first-*(odd){} B:nth-child 是根 ...

  3. CSS3伪类和伪元素的特性和区别

    前端er们大都或多或少地接触过CSS伪类和伪元素,比如最常见的:focus,:hover以及<a>标签的:link.visited等,伪元素较常见的比如:before.:after等. 其 ...

  4. CSS3伪类和伪元素

    作为一个CSS3初学不久者来说,很容易混淆单冒号(:)和双冒号(::)的用法,以为两者可以互换着来使用.我自己之前也混淆过他们,因为两者看起来太相像了,就像孪生兄弟.但实际上,他们的区别还是挺大的,最 ...

  5. css3怎么分清伪类和伪元素

    伪类用于向某些选择器添加特殊的效果. 伪元素用于将特殊的效果添加到某些选择器. 伪类有::first-child ,:link:,vistited,:hover,:active,:focus,:lan ...

  6. CSS3伪类和伪元素的特性和区别尤其是 ::after和::before

    伪类和伪元素的理解 官方解释: 伪类一开始单单只是用来表示一些元素的动态状态,典型的就是链接的各个状态(LVHA).随后CSS2标准扩展了其概念范围,使其成为了所有逻辑上存在但在文档树中却无须标识的“ ...

  7. ::before ::after CSS3中的伪类和伪元素

    ::before和::after伪元素的用法 一.介绍 css3为了区分伪类和伪元素,伪元素采用双冒号写法. 常见伪类——:hover,:link,:active,:target,:not(),:fo ...

  8. CSS3伪类与伪元素的区别及注意事项

    CSS中伪类与伪元素的概念是很容易混淆的 今天就来谈谈伪类与伪元素之间的区别 定义 首先先来看看伪类与伪元素的定义 w3c中对于它们是这么解释的 伪类:用于向某些选择器添加特殊的效果 伪元素:用于将特 ...

  9. css3的伪（伪类和伪元素）大合集

    本文讲css3的伪,不是讲它有多虚伪,而是说它的伪元素样式.不得不说以前虽知html伪元素,但很少用,后得知借助css3伪元素可以发挥极大的便利.故总结css3的伪如下: CSS中存在一些比较特殊的属 ...

  10. CSS3 动态生成内容(在Web中插入内容)====CSS的伪类或者伪元素

    # css3 .类:伪类::伪元素 /* CSS3伪元素/伪类 :https://www.w3.org/TR/css3-selectors/#selectors ::selection 伪元素(F12 ...

随机推荐

  1. 读扇区错误:0柱面0磁头1扇区(硬盘问题，蓝屏等 0x0000007B)

    原文发布时间为:2010-05-25 -- 来源于本人的百度文章 [由搬家工具导入] 读扇区错误:0柱面0磁头1扇区(硬盘问题，蓝屏等 0x0000007B) DISKGEN能找到,那就没什么大问题的 ...

  2. [转].net创建XML文件的两种方法

    原文发布时间为:2009-08-26 -- 来源于本人的百度文章 [由搬家工具导入] 方法一：按照XML的结构一步一步的构建XML文档.    通过.Net FrameWork SDK中的命名空间&q ...

  3. 小甲鱼PE详解之资源（PE详解11）

    原文出自:www.fishc.com 最近一直在安排第一届鱼C 学习班的事情,忙活了好一阵子,真是对不住大家,还大家久等了,这里要跟大家说声不好意思 ^_^ 今天我们来谈谈资源部分,资源部分可以说是 ...

  4. hdu 3657 最小割的活用 / 奇偶方格取数类经典题 /最小割

    题意:方格取数,如果取了相邻的数,那么要付出一定代价.(代价为2*(X&Y))(开始用费用流,敲升级版3820,跪...) 建图:  对于相邻问题,经典方法:奇偶建立二分图.对于相邻两点连边2 ...

  5. AC日记——[SCOI2007]蜥蜴 bzoj 1066

    1066 思路: 网络流最大流: 拆点,每个点拆成两个,流量为这个点的高度: 注意,文中说的距离是曼哈顿距离(劳资以为开根号wa了不知道多少次): 每两个距离不大于d的点连边,流量inf: 如果距离能 ...

  6. HDU 2767.Proving Equivalences-强连通图(有向图)+缩点

    Proving Equivalences Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Oth ...

  7. 2017广东工业大学程序设计竞赛决赛 F（LCA + 斐波那契数列性质）

    不能组成三角形的极端数列:1,1,2,3,5,8,13,21,……到第50项时候肯定到1e9了…… 如果两个点之间距离大于50,则直接Yes…… 否则的话直接暴力取出所有边,然后升序排序,判断一下就可 ...

  8. JLOI2018 日志

    JLOI2018 今年有幸参加吉林省的省选,考过之后在这里写一下总结和感受. DAY1: t1(chess):首先看到题目,第一想法是暴力,上来直接写了暴力,枚举所有的情况,再在这些情况里找到差值最大 ...

  9. MariaDB半同步复制

    1.主从复制原理 MySQL的二进制日志(binglog)会记录所有对数据库进行更改的操作,也就是说只要是会对数据库产生修改的操作都会被记录到二进制日志中去.记录二进制日志的主要目的有两方面:a.恢复 ...

  10. Linux使用cd回到上一目录

    //返回上一级目录 cd .. //返回用户主目录 cd 或 cd ~ //返回根目录 cd /