1-3:CSS3课程入门之伪类和伪元素
2024-09-04 17:04:00
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>
最新文章
- org.hibernate.AssertionFailure:collection[......] was not processed by flush()
- jQuery MiniUI开发系列之:创建组件对象
- ssh myeclipse的bug
- Oracle死锁产生的原因和解决办法
- 使用Myeclipse完成Hibernate的逆向工程
- 网页Gzip
- C# 实现将PDF转文本的功能
- [每日一题] 11gOCP 1z0-052 :2013-09-25 Lock ――for update.................................C23
- A+B II
- Git如何检出指定目录或文件
- 201521123063 《Java程序设计》 第10周学习总结
- LinkedList与Queue
- vue-resource post请求后台接口报400(跨域问题解决方法)
- js获取元素提示信息
- pat 1051Pop Sequence
- SQL注入方法之:获取列名
- 多线程中实现ApplicationContextAware接口获取需要的bean,applicationContext.getBea未返回也未报错
- javascript加密PHP解密---jsencrypt
- 容器监控告警方案(cAdvisor + nodeExporter + alertmanager + prometheus +grafana)
- Mac笔记本安装mysql
热门文章
- FckEditor2.65使用范例源码
- hdu 3061 hdu 3996 最大权闭合图 最后一斩
- 关于centos防火墙
- AC日记——封锁阳光大学 洛谷 P1330
- angularjs 1 如何在ng-route的模板中使用script标签
- 【IDEA】(3)---非常实用提高开发效率和水平的插件
- SQL-基础学习4--聚集函数:AVG(),COUNT(),MAX(),MIN(),SUM();聚集不同值:DISTINCT
- autolayout先进的自动布局工具箱
- [CentOS]怎样解决gcc版本号冲突?
- django如何用邮箱代替用户名登录