关于CSS样式表中属性关键词使用

CSS3 :nth-child() 选择器

li:nth-child(3){background:orange;}          /* 把第3个LI的背景设为橙色 */

倍数写法:
li:nth-child(3n){background:orange;}           /* 把第3、第6、第9、…、所有3的倍数的LI的背景设为橙色 */

倍数分组匹配:
li:nth-child(3n+1){background:orange;}             /* 匹配第1、第4、第7、…、每3个为一组的第1个LI */
li:nth-child(3n+5){background:orange;}             /* 匹配第5、第8、第11、…、从第5个开始每3个为一组的第1个LI */
li:nth-child(5n-1){background:orange;}            /* 匹配第5-1=4、第10-1=9、…、第5的倍数减1个LI */

同样,用超链接a标签也是如此;(写法依旧)
a:nth-child(3){background:orange;}
a:nth-child(3n){background:orange;}
a:nth-child(3n+1){background:orange;}
a:nth-child(3n+5){background:orange;}
a:nth-child(5n-1){background:orange;}

margin 属性

margin简写属性在一个声明中设置所有外边距属性。该属性可以有1到4个值。

实例:

margin:10px 5px 15px 20px;
上边距是 10px
右边距是 5px
下边距是 15px
左边距是 20px

margin:10px 5px 15px;
上边距是 10px
右边距和左边距是 5px
下边距是 15px

margin:10px 5px;
上边距和下边距是 10px
右边距和左边距是 5px

margin:10px;
所有四个边距都是 10px

padding 属性

padding 简写属性在一个声明中设置所有填充属性。该属性可以有1到4个值。

实例:

padding:10px 5px 15px 20px;
上填充是 10px
右填充是 5px
下填充是 15px
左填充是 20px

padding:10px 5px 15px;
上填充是 10px
右填充和左填充是 5px
下填充是 15px

padding:10px 5px;
上填充和下填充是 10px
右填充和左填充是 5px

padding:10px;
所有四个填充都是 10px
本文来源:转载
版权声明:本站內容部分来源于网络,仅供个人学习交流。如有侵权内容请留言告知,本站将会立即处理!
文章标题:关于CSS样式表中属性关键词使用
本文链接:https://www.zluckin.com/7.html
原文链接:https://boke112.com/post/4286.html
2 条评论
589