示例:
/*想为前面的5个元素添加样式*/ /*n:默认取值范围为0~子元素的长度.但是当n<=0时,选取无效 0>>5 1>>4 ... 4>>1 5>>0*/ li:nth-of-type(-n+5){ font-size: 30px; } li:nth-last-of-type(-n+5){ font-size: 30px; }PS:n 可是多种形式:nth-child(2n)、nth-child(2n+1)、nth-child(-n+5)等。
2.2.6、空值:没有任何的内容,连空格都没有
li:empty{ background-color: red; }2.2.7、锚链接伪类
E:target :可以为锚点目标元素添加样式,当目标元素被触发为当前锚链接的目标时,调用此伪类样式。
/*h2为锚点,在被触发时将h2的字体改为红色*/ h2:target{ color: red; } 3、伪元素选择器伪元素之所以被称为伪元素,是因为它不是真正的DOM,但是却可以当成一个DOM元素看待,它的用法和真正的DOM元素的操作是一样的,但是在DOM树中又不会出现。
既然是伪元素,那么无法使用 JS 的方式来获取。
css有一系列的伪元素,如::before,::after,::first-line,::first-letter等,本文就详述一下:before和:after元素的使用。
3.1、E::before,E::after是一个行内元素,需要转换成块:display:block 或者 float:left/right 或者使用 position 。
必须添加 content , 哪怕不设置内容,也需要content:"",否则不会起作用。
E:after、E:before 在旧版本里是伪类,在新版本里是伪元素,因为在新版本下E:after、E:before会被自动识别为E::after、E::before,按伪元素来对待,这样做的目的是用来做兼容处理。
E::before:定义在一个元素的内容之前插入 content 属性定义的内容与样式。
E::after:定义在一个元素的内容之后插入 content 属性定义的内容与样式。
注意:
IE6、IE7与IE8(怪异模式Quirks mode)不支持此伪元素
CSS2中 E:before或者E:after,是属于伪类的,并且没有伪元素的概念,CSS3中 提出伪元素的概念 E::before和E::after,并且归属到了伪元素当中,伪类里就不再存在E:before或者 E:after伪类
示例:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> div:nth-of-type(1){ width: 300px; height: 200px; background-color: red; float: left; position: relative; } div:nth-of-type(2){ width: 100px; height: 200px; background-color: blue; float: left; } div:nth-of-type(1)::before { content: ""; position: absolute; width: 20px; height: 20px; background-color: #fff; border-radius: 50%; right: -10px; top: -10px; } div:nth-of-type(1)::after { content: ""; position: absolute; width: 20px; height: 20px; background-color: #fff; border-radius: 50%; right: -10px; bottom: -10px; } </style> </head> <body> <div></div> <div></div> </body> </html> 3.2、E:first-letter选中文本的第一个字母(英文)或者文字(中文)
/*设置首字下沉*/ p::first-letter { font-size: 40px; float: left; } 3.3、E::first-line选中文本第一行
PS:如果同时设置了::first-letter,那么 ::first-line 无法对第一个字母或文字进行设置(颜色除外)。
3.4、E::selection设置选中文本的样式。
注意:不能改变其大小,但是可以改变颜色。
p::selection { background-color: orange; }