<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
/*1: 針對a標籤 順序要注意 不然會被覆蓋*/
.el:link{
color:red;
}
.el:visited{
color: orange;
}
.el:hover{
color: yellow;
}
.el:active{
color:green;
}
/* 2: input複選框的自定義樣式 */
input[type="checkbox"]{
width:18px;
height:18px;
display: inline-block;
text-align: center;
line-height:18px;
vertical-align: middle;
position: relative;
top:0;
}
input[type="checkbox"]::before{
content: "";
position: absolute;
top: -3px;
left: 0;
background: #fff;
width: 100%;
height: 100%;
border: 1px solid #d9d9d9
}
input[type="checkbox"]:checked::before{
content: "\2713";
background-color: #fff;
position: absolute;
left:0;
top:-3px;
border: 1px solid #e50232;
color:#e50232;
font-size: 20px;
font-weight: bold;
}
input[type="checkbox"]:checked + label{
color:red;
}
</style>
</head>
<body>
<div>
<h1>1.動態僞類選擇器</h1>
<a href='#' class='el'>點擊之前 點擊之後 滑過懸停 激活不放 </a>
<h1>2.僞類元素</h1>
<p>
<input type="checkbox" id='checkbox'>
<label for="checkbox">選中狀態</label>
</p>
</div>
<script>
</script>
</body>
</html>
僞類選擇器和僞類元素的用法
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章
css實現input文本框與圖片行內水平居中對齊
css實現input文本框與圖片行內水平居中對齊 如圖輸入框與圖片不對齊 css樣式添加 input,img {vertical-align:middle;}