css3 選擇器 簡單的分頁 css選擇器 ul.pagination li a:hover:not(.active) 選擇除了類名為 active的專案
阿新 • • 發佈：2018-12-25
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>練習 分頁</title>
<link type="text/css" href="css/style.css"/>
<script src="js/jquery-3.3.1.js"></script>
<style>
*{margin:0;
padding:0;
list-style:none;}
ul.pagination{
display:inline-block;}
ul.pagination li{
display:inline;}
ul.pagination li:first-child a{
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
}
.pagination li:last-child a {
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}
ul.pagination li a{
color:black;
float:left;
padding:8px 16px;
text-decoration:none;
border: 1px solid #ddd;
margin: 0 4px;
font-size: 22px;}
ul.pagination li a.active{
background-color: #4CAF50;
color: white;
transition:background-color 2s;
}
ul.pagination li a:hover:not(.active){
background-color:#ddd;}
</style>
</head>
<body>
<h2>簡單的分頁</h2>
<ul class="pagination">
<li><a href="#">«</a></li>
<li><a href="#">1</a></li>
<li><a class="active" href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">6</a></li>
<li><a href="#">7</a></li>
<li><a href="#">»</a></li>
</ul>
<script>
$(document).ready(function(e) {
});
</script>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>練習 分頁</title>
<link type="text/css" href="css/style.css"/>
<script src="js/jquery-3.3.1.js"></script>
<style>
*{margin:0;
padding:0;
list-style:none;}
ul.pagination{
display:inline-block;}
ul.pagination li{
display:inline;}
ul.pagination li:first-child a{
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
}
.pagination li:last-child a {
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}
ul.pagination li a{
color:black;
float:left;
padding:8px 16px;
text-decoration:none;
border: 1px solid #ddd;
margin: 0 4px;
font-size: 22px;}
ul.pagination li a.active{
background-color: #4CAF50;
color: white;
transition:background-color 2s;
}
ul.pagination li a:hover:not(.active){
background-color:#ddd;}
</style>
</head>
<body>
<h2>簡單的分頁</h2>
<ul class="pagination">
<li><a href="#">«</a></li>
<li><a href="#">1</a></li>
<li><a class="active" href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">6</a></li>
<li><a href="#">7</a></li>
<li><a href="#">»</a></li>
</ul>
<script>
$(document).ready(function(e) {
});
</script>
</body>
</html>