CSS教程

? css3选择器、伪类、伪元素

本文主要是介绍? css3选择器、伪类、伪元素,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

选择器

CSS2.1中,选择器7种:

id选择器 #box

类选择器 .red

标签选择器 p

后代 div p

交集   div.red

并集   div,p

通配符   *

关系选择符

>  儿子,亲儿子,不是后代,必须是儿子

+ next sibling,下一个兄弟

~   next all siblings ,下所有兄弟

不要加空格,因为CSS中的空格有后代的意思。

>儿子选择器

1 .box>p{

2  color:red;

3 }

IE7开始兼容

+ 下一个兄弟,next sibling

IE7开始兼容

~ 后面所有兄弟,next all siblings

属性选择器

哲学上讲,CSS2.1层面,只能通过id属性、class属性选择元素。CSS3中,可以通过任意属性选择元素了。

选择器img标签中所有src属性为images/2.png的:

img[src="images/2.png"]{

2  border:10px solid red;

3 }

方括号就是属性选择器,可以把任何HTML标签的属性当做选择器。

1 img[kaola="你"]{

2  transform:rotate(45deg);

3 }

 IE7开始兼容

哲学上讲:

1 #box

等价于

1 [id="box"]

儿子序选择器

都是用伪类的符号“:”

只要一个p是某个元素的第一个儿子,那么选择它,IE7兼容

1 p:first-child

所以,和jQuery中$(“p:first”)不一样,  因为CSS3中的:first-child不吹哨排队。

jQuery:  爸爸去哪儿的比喻,村长李锐要吹哨,吹出所有的p,然后大排队,第一个p变红。

CSS3:    不吹哨大排队,只要你是家里的老大,你就被选择。

只要一个p是某个元素的最后一个儿子,那么选择它,IE9兼容

1 p:last-child

只要一个p是某个元素的第1个儿子,那么选择它,IE9兼容

1 p:nth-child(1)

下标从1开始。不能是0,不能是负数。

只要一个p是某一个元素的第8、11、14、17……个儿子,那么选择它,IE9兼容

1 p:nth-child(3n+8)

从第8个开始,每3个选一个

同样的,jQuery也支持上面的选择器,IE6兼容。

只要一个p是某个元素的倒数第3个儿子,那么选择它,IE9兼容

1 p:nth-last-child(3)

只要一个p是某个元素的倒数第8、11、14……个儿子,那么选择它,IE9兼容

1 p:nth-last-child(3n+8)

只要一个h3是某一个而元素的h3儿子中的第2个,那么选择它,IE9兼容

1 h3:nth-of-type(2)

 比如下面的html结构,能够选择上的是:

只要一个元素有.haha类并且是同种标签的第2个儿子,那么选择它,IE9兼容

1 .haha:nth-of-type(2)

倒数:

1 :nth-last-of-type(3)

总结一下,都暗含了是某个人的第几个儿子:

1 :first-child()  只有这个IE7兼容,一下统统IE9兼容

2 :last-child()

3 :nth-child()

4 :nth-of-type()

5 :nth-last-child()

6 :nth-last-of-type()

7 :first-of-type()

8 :last-of-type()

一定要记住吹不吹哨这个事儿

伪类

CSS2.1中,只能给a标签增加伪类。a:link、a:hover、a:visited、a:active。

:hover

能够给所有元素使用了

:hover这个选择器,在CSS3中,能够给任何元素使用了。IE7兼容各种元素:hover

:focus

得到焦点时,当一个表单元素有焦点,那么就能够被:focus伪类选中。

1  input:focus{

2  /*动画*/

3  animation:haha 1s ease 0s infinite alternate;

4  }

:not

反着选,没有.haha类的p,IE9兼容

1 p:not(.haha)

:only-child

唯一的儿子,如果一个p是某一个元素的唯一的儿子,那么选择它。IE9兼容。

1 p:only-child{

2  color:red;

3 }

伪元素

::before 、  ::after

两个冒号表示伪元素。

1 p::before{

content:">>>>";

3 }

content表示内容,所有的::before必须有content属性,否则语法错误。如果没有content,那么也要写content:””

注意::before 、::after都是行内元素,必须转块或者脱标才能设置宽度高度。

创建了假的元素,伪元素。

before的诞生,方便了很多:

after可以用来清除浮动。

1  .cl::after{

2  content:"";

3  display: block;

4  clear: both;

5  }

IE8不兼容::after,但是兼容:after。所以为了更大的兼容,写成:after即可。

::selection  

被选中的文字样式

1  p::selection{

2  background-color: orange;

3  color:white;

4  }

IE9开始兼容

::first-letter 、::first-line  

第一个文字和第一行

IE9开始兼容

 

这篇关于? css3选择器、伪类、伪元素的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!