< p >在CSS編碼過(guò)程中，我們總是需要測(cè)試樣式在不同元素和狀態(tài)下的情況。這個(gè)時(shí)候，CSS延伸測(cè)試就派上用場(chǎng)了。本文就為大家介紹一些常用的CSS延伸測(cè)試方法。< /p >
< p >1. 使用:focus和:hover偽類(lèi)< /p >
< pre >
.btn:hover{
background-color: #555;
}
.btn:focus{
outline: none;
border: 1px solid #555;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}
< /pre >
< p >2. 使用:first-child和:last-child偽類(lèi)< /p >
< pre >
ul li:first-child{
background-color: red;
}
ul li:last-child{
background-color: blue;
}
< /pre >
< p >3. 使用:nth-child偽類(lèi)< /p >
< pre >
ul li:nth-child(odd){
background-color: green;
}
ul li:nth-child(even){
background-color: yellow;
}
< /pre >
< p >4. 使用@media查詢< /p >
< pre >
@media screen and (max-width: 320px){
.header{
font-size: 16px;
padding: 10px;
}
}
< /pre >
< p >5. 使用:active偽類(lèi)< /p >
< pre >
.btn:active{
background-color: #999;
}
< /pre >
< p >總之，CSS延伸測(cè)試在CSS編碼中非常重要。以上方法只是一些常用方法。在實(shí)際的開(kāi)發(fā)中，我們需要結(jié)合不同情況選擇不同的測(cè)試方法。< /p >