CSS3新增偽類有那些？

p:first-of-type:選擇屬于其父元素的首個

元素

p:last-of-type:選擇屬于其父元素的最后

元素

p:only-of-type:屬于父元素的特定類型的唯一子元素

p:only-child:屬于父元素的唯一子元素的每個

元素

p:nth-child(2):選擇父元素的第二個子元素

::after 在元素之前添加內容

::before 在元素之后添加內容

:enabled 已啟用

:disabled 控制表單為禁用狀態，不可點擊

:checked 單選框或復選框被選中

如何居中div

第一種方式：給div設置一個寬度，然后添加margin:0 auto屬性.

div{

width:200px;

margin:0 auto;

}

第二種方式：讓絕對定位的div居中

div{

position:absolute;

width:300px;

height:300px;

margin:auto;

top:0;

left:0;

bottom:0;

right:0;

background-color:pink;

}

第三種方式：水平垂直居中一

div{

position:relative;

width:500px;

height:300px;

top:50%;

left:50%;

margin:-150px 0 0 -250px;

background-color:pink;

}

第四種方式：未知容器的寬高，利用'transform'屬性

div{

position:absolute;

width:500px;

height:300px;

top:50%;

left:50%;

transform:translate(-50%,-50%)

background-color:pink;

}

第五種方式：利用flex布局，需考慮兼容性

container{

display:flex;

align-item:center;/*垂直居中*/

justify-content:center;/*水平居中*/

}

container div{

width:100px;

height:100px;

background-color:pink

}

每日兩道前端面試題20190307

希望睡一覺起來 陽光會出來.

總結

以上是生活随笔為你收集整理的html新增伪类,CSS3新增的伪类有哪些 与 居中div的多种方法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。