文章目录
- 1、关系性选择器:E+FE~F
- 2、属性选择器
- 3、伪元素选择器
- 4、伪类选择器(被选中的元素的一个种状态)
- calc
1、关系性选择器:E+FE~F
2、属性选择器
E[attr~=“val”]E[attr|=“val”]E[attr^=“val”]E[attr$=“val”]E[attr*=“val”]
3、伪元素选择器
E::placeholderE::selection
Div:nth-of-type(1)::selection{只能写三个属性color/background-color/text-shadow}
4、伪类选择器(被选中的元素的一个种状态)
eg:li:not(:last-of-type){
eg:li:not(:last-of-type){
order-bottom:1pxsolidblack;
}
E:root===html
- E:target
//eg:
<ahref="#box1"></a>
<ahref="#box2"></a>
<divclass="box1"></div>
<divclass="box2"></div>
css:div:target{
border:1pxsolidblack;
}
- E:first-childE:last-child
- E:only-child
E:nth-child(n)/even:偶数odd:奇数/
/*n--->n是自然数,从0开始查数css从1开始查数*/
- E:nth-last-child(n)
- E:first-of-type
- E:last-of-type
-
E:only-of-type
-
E:nth-of-type(n)
-
E:nth-of-last-type(n)
- E:empty
- E:checked
E:enabled Input:enabled{} //示能用的样式
E:disabled Input:disabled{} //表示不能用的样式
E:read-only //表示只能选中,不改
E:read-write //可读可写
calc
条件
1. Position:absolute;
2. 减号两边要有空格
水平居中:left:calc(50%-50px)
垂直居中:top:calc(50%-50px)
div{
width:100px;
height:100px;
border:1pxsolidgray;
position:absolute;
left:calc(50%-50px);
top:calc(50%-50px);
border-radius:10px20px30px40px; 2
}