css3的高级选择器第几个（第1个|最后1个|第奇数个|第偶数个|第5个|倒数第5个|第5个(含)之后|第5个(含)之前|第5n个(含)|第5n+1个|每隔4个循环一次|第三列（每行10列）|第三行）
概述
由于现在系统数据都是后台传到前台的，有时候需要处理某些元素的样式，这时候css3的高级选择器就能排上用场了！
2023年04月13日18:30:11 修复第5n+1个的显示及css代码
第1个
li:nth-child(1){}
first-child{}
最后1个
li:last-child{}
第奇数个
li:nth-child(odd / 2n+1 / 2n-1)
第偶数个
li:nth-child(even / 2n)
第5个
li:nth-child(5)
倒数第5个
li:nth-last-child(5)
第5个(含)之前
li:nth-child(-n+5)
第5个(含)之后
注意这里只能是n+5，如果写5+n不起作用。
li:nth-child(n+5)
第5n个(含)
li:nth-child(5n)
第5n+1个
li:nth-child(5n+1)
每隔4个循环一次
li:nth-child(4n+1)， li:nth-child(4n+2)，li:nth-child(4n+3)， li:nth-child(4n)
第三列（每行10列）
li:nth-child(10n+3)
第三行（每行10列）
li:nth-child(n+31):not(:nth-child(n+41))
完整demo部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport"
content="initial-scale=1,maximum-scale=1,user-scalable=no,width=device-width,height=device-height">
<meta charset="UTF-8">
<meta name="Author" content="haley">
<meta name="Keywords" content="">
<meta name="Description" content="">
<script crossorigin="anonymous" integrity="sha384-6ePHh72Rl3hKio4HiJ841psfsRJveeS+aLoaEf3BWfS+gTF0XdAqku2ka8VddikM" src="https://lib.baomitu.com/jquery/1.11.3/jquery.min.js"></script>
<link crossorigin="anonymous" integrity="sha384-pdapHxIh7EYuwy6K7iE41uXVxGCXY0sAjBzaElYGJUrzwodck3Lx6IE2lA0rFREo" href="https://lib.baomitu.com/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
<script crossorigin="anonymous" integrity="sha384-pPttEvTHTuUJ9L2kCoMnNqCRcaMPMVMsWVO+RLaaaYDmfSP5//dP6eKRusbPcqhZ" src="https://lib.baomitu.com/twitter-bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="../imgs/favicon.ico" rel="shortcut icon">
<script src="../js/goToHome.js"></script>
<title>css3高级选择器</title>
<style>
.high-selector ul li{
list-style: none;
float: left;
width:30px;
height:30px;
text-align: center;
line-height: 30px;
border:1px solid #ddd;
border-radius: 50%;
margin-right:2px;
}
.high-selector .s01>li:nth-child(1),
.high-selector .s02>li:last-child,
.high-selector .s1>li:nth-child(odd),
.high-selector .s2>li:nth-child(even),
.high-selector .s3>li:nth-child(5),
.high-selector .s4>li:nth-last-child(5),
.high-selector .s5>li:nth-child(n+5),
.high-selector .s6>li:nth-child(-n+5),
.high-selector .s7>li:nth-child(5n),
.high-selector .s8>li:nth-child(5n+1),
.high-selector .s9>li,
.high-selector .ss1>li:nth-child(10n+3),
.high-selector .ss2>li:nth-child(n+31):not(:nth-child(n+41))
{
background-color: #a574aa;
color: #fff;
font-weight: bold;
}
.high-selector ul.even{
width:370px;
}
.high-selector ul.odd{
width:392px;
}
.high-selector ul.half{
float: left;
}
.high-selector .s9>li:nth-child(4n+1){
background-color:lightgreen;
}
.high-selector .s9>li:nth-child(4n+2){
background-color:lightblue;
}
.high-selector .s9>li:nth-child(4n+3){
background-color:lightcoral;
}
.high-selector .s9>li:nth-child(4n){
background-color:#a574aa;
}
</style>
</head>
<body>
<div class="high-selector">
<ol class="container">
<li class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">第1个 li:nth-child(1)</h3>
</div>
<div class="panel-body">
<ul class="s01">
<li></li>
</ul>
</div>
</li>
<li class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">最后1个 li:last-child</h3>
</div>
<div class="panel-body">
<ul class="s02">
<li></li>
</ul>
</div>
</li>
<li class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">第奇数个 li:nth-child(odd / 2n+1 / 2n-1)</h3>
</div>
<div class="panel-body">
<ul class="s1">
<li></li>
</ul>
</div>
</li>
<li class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">第偶数个 li:nth-child(even / 2n)</h3>
</div>
<div class="panel-body">
<ul class="s2">
<li></li>
</ul>
</div>
</li>
<li class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">第5个 li:nth-child(5)</h3>
</div>
<div class="panel-body">
<ul class="s3">
<li></li>
</ul>
</div>
</li>
<li class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">倒数第5个 li:nth-last-child(5)</h3>
</div>
<div class="panel-body">
<ul class="s4">
<li></li>
</ul>
</div>
</li>
<li class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">第5个(含)之后 li:nth-child(n+5)</h3>
</div>
<div class="panel-body">
<ul class="s5">
<li></li>
</ul>
</div>
</li>
<li class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">第5个(含)之前 li:nth-child(-n+5)</h3>
</div>
<div class="panel-body">
<ul class="s6">
<li></li>
</ul>
</div>
</li>
<li class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">第5n个(含) li:nth-child(5n)</h3>
</div>
<div class="panel-body">
<ul class="s7">
<li></li>
</ul>
</div>
</li>
<li class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">第5n+1个(含) li:nth-child(5n+1)</h3>
</div>
<div class="panel-body">
<ul class="s8">
<li></li>
</ul>
</div>
</li>
<li class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">每隔4个循环一次 li:nth-child(4n+1)， li:nth-child(4n+2)，li:nth-child(4n+3)， li:nth-child(4n)</h3>
</div>
<div class="panel-body">
<ul class="s9">
<li></li>
</ul>
</div>
</li>
<li class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">第三列（每行10列） li:nth-child(10n+3)</h3>
</div>
<div class="panel-body">
<ul class="even ss1">
<li></li>
</ul>
</div>
</li>
<li class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">第三行（每行10列） li:nth-child(n+31):not(:nth-child(n+41))</h3>
</div>
<div class="panel-body">
<ul class="even ss2">
<li></li>
</ul>
</div>
</li>
</ol>
</div>
<script>
$(function(){
var s1=$('.s1');
for(var i=0;i<20;i++){
addHtml($('.s'+i),30);
addHtml($('.s0'+i),30);
addHtml($('.ss'+i),100);
}
function addHtml(el,n){
var html=[];
for(var i=1;i<=n;i++){
html.push('<li>'+i+'</li>');
}
el.html(html.join(''));
}
});
</script>
</body>
</html>
扫一扫
3298
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
