1-3:CSS3课程入门之伪类和伪元素
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课程入门之伪类和伪元素的更多相关文章
- 妙味css3课程---1-2、css3中新增的伪类和伪元素有哪些
妙味css3课程---1-2.css3中新增的伪类和伪元素有哪些 一.总结 一句话总结: 1.div:target{}是什么意思? 比如a标签的锚点链接到div,div:target{}就可以找到这个 ...
- css3 -- 伪类与伪元素
伪类: 1.结构伪类 A:E : first-child{} E : nth-*(n){} E : first-*(even){} E : first-*(odd){} B:nth-child 是根 ...
- CSS3伪类和伪元素的特性和区别
前端er们大都或多或少地接触过CSS伪类和伪元素,比如最常见的:focus,:hover以及<a>标签的:link.visited等,伪元素较常见的比如:before.:after等. 其 ...
- CSS3伪类和伪元素
作为一个CSS3初学不久者来说,很容易混淆单冒号(:)和双冒号(::)的用法,以为两者可以互换着来使用.我自己之前也混淆过他们,因为两者看起来太相像了,就像孪生兄弟.但实际上,他们的区别还是挺大的,最 ...
- css3怎么分清伪类和伪元素
伪类用于向某些选择器添加特殊的效果. 伪元素用于将特殊的效果添加到某些选择器. 伪类有::first-child ,:link:,vistited,:hover,:active,:focus,:lan ...
- CSS3伪类和伪元素的特性和区别尤其是 ::after和::before
伪类和伪元素的理解 官方解释: 伪类一开始单单只是用来表示一些元素的动态状态,典型的就是链接的各个状态(LVHA).随后CSS2标准扩展了其概念范围,使其成为了所有逻辑上存在但在文档树中却无须标识的“ ...
- ::before ::after CSS3中的伪类和伪元素
::before和::after伪元素的用法 一.介绍 css3为了区分伪类和伪元素,伪元素采用双冒号写法. 常见伪类——:hover,:link,:active,:target,:not(),:fo ...
- CSS3伪类与伪元素的区别及注意事项
CSS中伪类与伪元素的概念是很容易混淆的 今天就来谈谈伪类与伪元素之间的区别 定义 首先先来看看伪类与伪元素的定义 w3c中对于它们是这么解释的 伪类:用于向某些选择器添加特殊的效果 伪元素:用于将特 ...
- css3的伪（伪类和伪元素）大合集
本文讲css3的伪,不是讲它有多虚伪,而是说它的伪元素样式.不得不说以前虽知html伪元素,但很少用,后得知借助css3伪元素可以发挥极大的便利.故总结css3的伪如下: CSS中存在一些比较特殊的属 ...
- CSS3 动态生成内容(在Web中插入内容)====CSS的伪类或者伪元素
# css3 .类:伪类::伪元素 /* CSS3伪元素/伪类 :https://www.w3.org/TR/css3-selectors/#selectors ::selection 伪元素(F12 ...
随机推荐
- 给所有ajax请求增加随机数
var origionAjax=$.ajax $.ajax=function(obj){ obj.url=(obj.url).indexOf("?")>-1?(obj.url ...
- AC日记——【模板】树链剖分 洛谷 P3384
题目描述 如题,已知一棵包含N个结点的树(连通且无环),每个节点上包含一个数值,需要支持以下操作: 操作1: 格式: 1 x y z 表示将树从x到y结点最短路径上所有节点的值都加上z 操作2: 格式 ...
- POJ 1067 取石子游戏 [博弈]
题意:威佐夫博弈. 思路:看了很多证明都没看懂.最后决定就记住结论好了. 对于所有的奇异局面(必败局),有通项公式 Pi = (a, b), (a = i * [(sqrt(5) + 1) / 2], ...
- 【BZOJ1562】【jzyzOJ1730】【COGS409】NOI2009变换序列 二分图匹配
[问题描述] 对于N个整数0, 1, ……, N-1,一个变换序列T可以将i变成Ti,其中 定义x和y之间的距离.给定每个i和Ti之间的距离D(i,Ti), 你需要求出一个满足要求的变换 ...
- 笔记-迎难而上之Java基础进阶-终
使用Stream流的方式,遍历集合 import java.util.*; public class StreamDemo{ public static void main(String[] args ...
- Java 在Word创建表格
表格作为一种可视化交流模式及组织整理数据的手段,在各种场合及文档中应用广泛.常见的表格可包含文字.图片等元素,我们操作表格时可以插入图片.写入文字及格式化表格样式等.下面,将通过Java编程在Word ...
- Java NIO中的FileLock（文件锁）
FileLock,文件锁. 文件锁在OS中很常见,如果多个程序同时访问.修改同一个文件,很容易因为文件数据不同步而出现问题.给文件加一个锁,同一时间,只能有一个程序修改此文件,或者程序都只能读此文件, ...
- maxwell简单部署使用
详细资料可以参考maxwell官网 (mysql + maxwell + kafka + elasticsearch) 说明:本文主要是关于配置maxwell监听mysql的数据修改并实时将修改内容 ...
- Beginning Auto Layout Tutorial in iOS 7: Part 6
Gallery example 屏幕有四个分开的相同的矩形,每个矩形有一个label和一个image view.创建一个Gallery的项目.在Main.storyboard中,拖拉一个view大小为 ...
- 【svn】idea上svn 忽略文件不提交
可以自己新建一个更改文件列表,名字叫忽略 这样 你就可以 单纯的 管理剩余的默认文件了 ======================================================== ...