Discuz门户栏目列表翻页CSS控制:nth-child(n)的用法

摘要: PC电脑端的显示样式手机端显示样式discuz 门户做的网站,栏目列表翻页显示15个还多,在PC端显示的还好,但是如果在手机端显示就很不好看了,一直想修改一下,今天就通过css的方法修改一下:.pg label,.pg a:nth-chil ...

Discuz 门户栏目列表翻页CSS控制:nth-child(n)、first-child、last-child用法

PC电脑端的显示样式

Discuz 门户栏目列表翻页CSS控制:nth-child(n)、first-child、last-child用法

手机端显示样式

discuz 门户做的网站,栏目列表翻页显示15个还多,在PC端显示的还好,但是如果在手机端显示就很不好看了,一直想修改一下,今天就通过css的方法修改一下:

.pg label,.pg a:nth-child(n+4) {display:none;}   //从第四行向后全部不显示
.pg a.nxt{display:inline-block;} //显示最后一个“下一页”按钮

Discuz 门户栏目列表翻页CSS控制:nth-child(n)、first-child、last-child用法

修改后翻页显示的样式,是不是好看不少


下面是nth-child(n)、first-child、last-child用法,大家都学习一下具体的用法

注:E:nth-child(n)选择器匹配父元素中的第n个子元素E(是第n个子元素且是E元素才生效)。
n可以是一个数字,一个关键字,或者一个公式。

一、nth-child(n)用法:
1.nth-child(3)
表示选择列表中的第3个标签,代码如下:

li:nth-child(3){background:#fff}

2.nth-child(2n)
表示选择列表中的偶数标签,即选择 第2、第4、第6…… 标签,代码如下:

li:nth-child(2n){background:#fff}

3.nth-child(2n-1)
表示选择列表中的奇数标签,即选择 第1、第3、第5、第7……标签,代码如下:

li:nth-child(2n-1){background:#fff}

4.nth-child(n+3)
表示选择列表中的标签从第3个开始到最后(正向选择),代码如下:

li:nth-child(n+3){background:#fff}

5.nth-child(-n+3)
表示选择列表中的标签从0到3,即小于3的标签(逆向选择),代码如下:

li:nth-child(-n+3){background:#fff}

6.nth-last-child(3)
表示选择列表中的倒数第3个标签,代码如下:

li:nth-last-child(3){background:#fff}

二、first-child用法:
1.first-child
first-child表示选择列表中的第一个标签。代码如下:

li:first-child{background:#fff}

三、last-child用法:
1.last-child
last-child表示选择列表中的最后一个标签,代码如下:

li:last-child{background:#fff}

相关阅读