CSS伪类,状态伪类和结构性伪类
16lz
2022-07-08
/ 状态伪类:当选择得目标对象状态发生改变后,进行什么样的样式设置 /
.list > li.first{
color: blueviolet;
}
.list > li:nth-of-type(1){
color: brown;
}
.list > li:nth-of-type(5){
color: brown;
}
/*
:nth-of-type(an+b)
1 a:系数,[0,1,2,3...]
2 n:参数,[0,1,2,3...]
3 b:偏移量,从0开始
*/
/* 匹配一个 */
/* 0*n+5 */
.list > li:nth-of-type(5){
color: brown;
}
/* 匹配一组 */
.list > li:nth-of-type(1n+3){
background-color: blueviolet;
}
.list > li:nth-of-type(-1n+3){
background-color: blue;
}
.list > li:nth-of-type(2n){
background-color: green;
}
/* 前3个 */
.list > li:nth-of-type(-n+3){
background-color: aquamarine;
}
/* 后3个 */
.list > li:nth-last-of-type(-n+3){
background-color: antiquewhite;
}
/* 第一个 */
.list > li:first-of-type{
}
/* 最后一个 */
.list > li:last-of-type{
}
/* 奇偶 even:偶数 */
.list > li:nth-of-type(even){
background-color: red;
}
/* 奇偶 odd:偶数 */
.list > li:nth-of-type(odd){
background-color: green;
}
/* 结构性伪类:选择子元素去使用的 */
/* 设置被禁用元素样式 */
input:disabled{
color: blue;
}
button:hover{
background-color: blue;
}
input.a +{
background-color: blue;
}
input:focus{
background-color: blue;
}
更多相关文章
- Android柱状图-柱子分组
- 第一章:android串口开发so库生成
- 伪类选择器:元素匹配过程
- 如何判断一个点在地图上?如何判断一个点在多边形内?
- Android串口开发,基于官方的android-serialport-api增加支持设置
- python利用while求100内的整数和方式
- PHP算法练习九:将全部偶数转到全部奇数之前
- 1. box-sizing属性解决了什么问题?2. 伪类选择器的参数 an+b的经
- 给定一个数组筛选其偶数成员组成新的数组返回