从零开始学 Web 之 CSS3(一)CSS3概述,选择器 (2)

示例:

/*想为前面的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; }

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/zwxxzw.html