妙味css3课程---1-2、css3中新增的伪类和伪元素有哪些
妙味css3课程---1-2、css3中新增的伪类和伪元素有哪些
一、总结
一句话总结:
1、div:target{}是什么意思?
比如a标签的锚点链接到div,div:target{}就可以找到这个div
E:target { sRules }
匹配相关URL指向的E元素。
2、如何用input框模拟单选框?
用input:checked属性可以找到我们点击的input框,然后就能实现背景发生改变,模拟选中
E:checked { sRules }
匹配用户界面上处于选中状态的元素E。(用于input type为radio与checkbox时)
3、p::selection{}表示什么?
p::selection{}表示什么
表示p标签中被选中的内容,从而可以设置被选中内容的颜色
E::selection { sRules }
设置对象被选择时的样式。
4、E:after/E::after { sRules }如何使用?
E:after/E::after { sRules }如何使用
设置在对象后(依据对象树的逻辑结构)发生的内容。用来和content属性一起使用,并且必须定义content属性
5、伪类选择器中的单冒号和双冒号的区别和联系是什么?
CSS3将伪对象选择符(Pseudo-Element Selectors)前面的单个冒号(:)修改为双冒号(::)用以区别伪类选择符(Pseudo-Classes Selectors),但以前的写法仍然有效。
即E:after可转化为E::after
6、before和after有什么用(两种)?
不仅可以用新属性content添加内容,还可以添加样式,要配合content一起使用
二、css3中新增的伪类和伪元素有哪些
1、相关知识
2、代码
妙味css3课程---1-2、css3中新增的伪类和伪元素有哪些的更多相关文章
- 妙味css3课程---1-1、css中自定义属性可以用属性选择器么
妙味css3课程---1-1.css中自定义属性可以用属性选择器么 一.总结 一句话总结:可以的. 1.如何实现用属性选择器实现a标签根据href里面含有的字段选择背景图片? p a[href*=te ...
- ::before ::after CSS3中的伪类和伪元素
::before和::after伪元素的用法 一.介绍 css3为了区分伪类和伪元素,伪元素采用双冒号写法. 常见伪类——:hover,:link,:active,:target,:not(),:fo ...
- CSS3 动态生成内容(在Web中插入内容)====CSS的伪类或者伪元素
# css3 .类:伪类::伪元素 /* CSS3伪元素/伪类 :https://www.w3.org/TR/css3-selectors/#selectors ::selection 伪元素(F12 ...
- 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伪类和伪元素的特性和区别尤其是 ::after和::before
伪类和伪元素的理解 官方解释: 伪类一开始单单只是用来表示一些元素的动态状态,典型的就是链接的各个状态(LVHA).随后CSS2标准扩展了其概念范围,使其成为了所有逻辑上存在但在文档树中却无须标识的“ ...
- CSS3伪类与伪元素的区别及注意事项
CSS中伪类与伪元素的概念是很容易混淆的 今天就来谈谈伪类与伪元素之间的区别 定义 首先先来看看伪类与伪元素的定义 w3c中对于它们是这么解释的 伪类:用于向某些选择器添加特殊的效果 伪元素:用于将特 ...
- css3的伪(伪类和伪元素)大合集
本文讲css3的伪,不是讲它有多虚伪,而是说它的伪元素样式.不得不说以前虽知html伪元素,但很少用,后得知借助css3伪元素可以发挥极大的便利.故总结css3的伪如下: CSS中存在一些比较特殊的属 ...
随机推荐
- 解决MAC下PHP连接MYSQL错误Warning: mysql_connect(): No such file or directory in conn.php
今天在mac上用php去连接mysql数据库,出现了 mac PHP Warning: mysql_connect(): [2002] No such file... 详细例如以下所看到的: Dir ...
- URAL 1513. Lemon Tale(简单的递推)
写几组数据就会发现规律了啊. .但是我是竖着看的.. .还找了半天啊... 只是要用高精度来写,水题啊.就当熟悉一下java了啊. num[i] = 2*num[i-1]-num[i-2-k]. 15 ...
- VS链接数据库
可以用VS链接数据库,并进行数据库操作.前提是安装了Sqlserver,活着连接线上的数据库服务器.
- Announcing Zuul: Edge Service in the Cloud--转
原文地址:http://techblog.netflix.com/2013/06/announcing-zuul-edge-service-in-cloud.html The Netflix st ...
- Sql Server新手学习入门
Sql Server新手学习入门 http://www.tudou.com/home/_117459337
- 发现javax.xml.parsers.SAXParser有bug
javax.xml.parsers.SAXParser有bug, 我发现的地方在characters(char[] ch, int start, int length) length偶尔会变小,导致截 ...
- css3 实现加载滚动条效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Convolution & Pooling exercise
convolution First, we want to compute σ(Wx(r,c) + b) for all valid (r,c) (valid meaning that the ent ...
- android开源项目---View篇
本文转载自:http://blog.csdn.net/likebamboo/article/details/19080739 主要介绍那些不错个性化的View,包括ListView.ActionBar ...
- thinkserer TD350 系统损坏后,数据恢复及系统重做过程
电脑配置: 联想服务器 TD350 E5-2609V4 2*8G 2*4T+R1 塔式 单电 1.系统恢复: 试过很多种方法,均无效 2.数据恢复: 重新安装系统后,直接在D盘查找 , 原C盘的 ...