妙味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中新增的伪类和伪元素有哪些的更多相关文章

  1. 妙味css3课程---1-1、css中自定义属性可以用属性选择器么

    妙味css3课程---1-1.css中自定义属性可以用属性选择器么 一.总结 一句话总结:可以的. 1.如何实现用属性选择器实现a标签根据href里面含有的字段选择背景图片? p a[href*=te ...

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

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

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

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

  4. css3 -- 伪类与伪元素

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

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

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

  6. CSS3伪类和伪元素

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

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

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

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

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

  9. css3的伪(伪类和伪元素)大合集

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

随机推荐

  1. 解决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 ...

  2. URAL 1513. Lemon Tale(简单的递推)

    写几组数据就会发现规律了啊. .但是我是竖着看的.. .还找了半天啊... 只是要用高精度来写,水题啊.就当熟悉一下java了啊. num[i] = 2*num[i-1]-num[i-2-k]. 15 ...

  3. VS链接数据库

    可以用VS链接数据库,并进行数据库操作.前提是安装了Sqlserver,活着连接线上的数据库服务器.

  4. Announcing Zuul: Edge Service in the Cloud--转

    原文地址:http://techblog.netflix.com/2013/06/announcing-zuul-edge-service-in-cloud.html   The Netflix st ...

  5. Sql Server新手学习入门

    Sql Server新手学习入门 http://www.tudou.com/home/_117459337

  6. 发现javax.xml.parsers.SAXParser有bug

    javax.xml.parsers.SAXParser有bug, 我发现的地方在characters(char[] ch, int start, int length) length偶尔会变小,导致截 ...

  7. css3 实现加载滚动条效果

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. Convolution & Pooling exercise

    convolution First, we want to compute σ(Wx(r,c) + b) for all valid (r,c) (valid meaning that the ent ...

  9. android开源项目---View篇

    本文转载自:http://blog.csdn.net/likebamboo/article/details/19080739 主要介绍那些不错个性化的View,包括ListView.ActionBar ...

  10. thinkserer TD350 系统损坏后,数据恢复及系统重做过程

    电脑配置: 联想服务器 TD350   E5-2609V4 2*8G 2*4T+R1 塔式 单电 1.系统恢复: 试过很多种方法,均无效 2.数据恢复:  重新安装系统后,直接在D盘查找 , 原C盘的 ...