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. Linux 一个sysv 脚本参考模板

    说明:  1.很多时候我们的服务都是通过源码包编译安装,但是有的源码包编译完成后并不提供该服务的sysv风格脚本,我们只能手动执其二进制程序+配置文件      2.如果服务器宕机或重启,就不能自动完 ...

  2. golang xorm reverse 自动生成数据库实体文件

    一.先安装好需要的东西 xorm 也可以参考官方文档 readme.md https://github.com/go-xorm/cmd 和 http://xorm.io/docs/ go get gi ...

  3. 解决mysql 远程链接问题

    grant all privileges on *.* to 'root'@'192.168.2.204' identified by '123456' with grant option;flush ...

  4. Codeforces 147B Smile House（DP预处理 + 倍增）

    题目链接  Smile House 题意  给定一个$n$个点的有向图,求一个点数最少的环,使得边权之和$>0$,这里的环可以重复经过点和边.   满足  $n <= 300$ 首先答案肯 ...

  5. 立即执行函数（IIFE）

    立即执行函数(IIFE) 看到这里,相信你一定迫不及待地想知道究竟如何做了吧,其实很简单,只需要用括号全部括起来即可,比如下面这样: (function(){ /* code */ }()); 为什么 ...

  6. poj 1185 炮兵阵地 [经典状态压缩DP]

    题意:略. 思路:由于每个大炮射程为2,所以如果对每一行状态压缩的话,能对它造成影响的就是上面的两行. 这里用dp[row][state1][state2]表示第row行状态为state2,第row- ...

  7. 3)nginx的启动与停止、重启,linux配置对外端口

    [启动] 启动代码格式:nginx安装目录地址 -c nginx配置文件地址例如: [root@LinuxServer sbin]# /usr/local/nginx/sbin/nginx -c /u ...

  8. Weblogic多数据源（Multi Data Sources）应用实践

    原创 2012年03月29日 10:55:28 标签: weblogic / 数据库 / 负载均衡 / 数据中心 / jdbc / 应用服务器   大型系统在进行数据库部署时,常常会分为主数据应用中心 ...

  9. flask的安全注意事项，如何防范XSS、CSRF、JSON安全

    参考官方文档:http://docs.jinkan.org/docs/flask/security.html 1.xss Flask 配置 Jinja2 自动转义所有值,除非显式地指明不转义.这就排除 ...

  10. Spark HA模式访问Hadoop HA下的数据

    首先是需要将hadoop的配置文件core-site,xml和hdfs-site.xml 拷贝到Spark conf目录下 然后启动提交即可 spark-submit \ --master spark ...