CSS3 常用选择器

复制代码
li:not(:last-child){border-right: 1px dashed black;} 选择全部排除最后一项

li:not(:first-child) { }选择全部排除第一项

li:last-of-type{background-color: red;}  选择li中最后一项

li:nth-of-type(5){background-color: pink;} 选择li元素里面第五个值
 
//奇数偶数
p:nth-of-type(2n){background-color: red;} 隔行变色里面也可以填写even 偶数变色 n 是计数器(从 0 开始)
   
p:nth-of-type(2n+1){background-color: pink;} 隔行变色里面也可以填写odd 奇数变色 

// input元素
input[type^="text"]{   /**选择具有type属性且属性值为以text开头的字符串的input元素。**/
     background-color: red;
 }
 
也可以写成[type^="text"] 这样范围更广一些
 
input[value$="按钮"]{  /**选择具有value属性且属性值为以按钮结尾的字符串的input元素。**/
  background-color:pink;
}

input[value*="按钮"]{   /**选择具有value属性且属性值为包含按钮的字符串的input元素。**/
  background-color: green;
} 

// 伪类添加
div:before{display:block;content:"before伪类,前面插入内容";width: 70px;height: 60px;background-color:pink;}

div:after{content:"after伪类,后面插入内容";width: 60px;height: 70px;background-color: green;display:block;}
 
复制代码

 

posted @   xuanPhoto  阅读(170)  评论(0编辑  收藏  举报
编辑推荐:
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列:如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列(二):开始使用ML.NET
阅读排行:
· 无需6万激活码!GitHub神秘组织3小时极速复刻Manus,手把手教你使用OpenManus搭建本
· C#/.NET/.NET Core优秀项目和框架2025年2月简报
· 什么是nginx的强缓存和协商缓存
· 一文读懂知识蒸馏
· Manus爆火,是硬核还是营销?
点击右上角即可分享
微信分享提示