CSS3 之选择器

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
}