妙味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、相关知识

伪类选择符

• E:link
• E:visited
• E:hover
• E:active
• E:focus
• E:lang(fr)
• E:not(s)
• E:root
• E:first-child
• E:last-child
• E:only-child
• E:nth-child(n)
• E:nth-last-child(n)
• E:first-of-type
• E:last-of-type
• E:only-of-type
• E:nth-of-type(n)
• E:nth-last-of-type(n)
• E:empty
• E:checked
• E:enabled
• E:disabled
• E:target
• @page:first
• @page:left
• @page:right

 

伪对象选择符

• E:first-letter/E::first-letter
• E:first-line/E::first-line
• E:before/E::before
• E:after/E::after
• E::placeholder
• E::selection

 

2、代码