1.:nth-of-type(-n+b)
实现效果：选择器匹配属于父元素的特定类型的前b个子元素的每个元素。
2.input[type='text']:focus
实现效果：光标触发文本框时设置样式。
3.*:target *
定义：URL 带有后面跟有锚名称 #，指向文档内某个具体的元素。这个被链接的元素就是目标元素(target element)。
:target 选择器可用于选取当前活动的目标元素
4.css中的'~'
例：#slide_1:target ~ .slide
为所有相同的父元素中位于#slide_1:target元素之后的所有.slide元素设置样式
实例练习
实现效果
注：重点利用css3 :target选择器和“~”的使用实现简单的轮播效果，注意代码中的布局以及position和点击按钮左侧的距离的变化。
整体代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />
<title>css案例实操</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
font-size: 12px;
}
body{
max-width:680px;
margin: 0 auto;
}
.rank{
width: 100%;
height: auto;
min-height:10rem;
overflow: auto;
}
.rank li{
width: 100%;
height: 3rem;
display: flex;
justify-content: space-between;
}
.rank li:first-child{
height: 3rem;
}
.rank li:nth-child(odd){
background-color: #aaa;
}
.rank li:nth-of-type(-n+4){
color:#f00;
}
.rank li:first-child span{
height: 3rem;
line-height: 3rem;
font-size: 24px;
color: #fff;
background-color: #000;
}
.rank li span{
width: 59%;
height: 3rem;
line-height: 3rem;
font-size: 18px;
text-align: center;
}
.rank li span:first-child,.rank li span:last-child{
width: 20%;
height: 3rem;
line-height: 3rem;
font-size: 18px;
text-align: center;
}
input[type='text']{
margin: 1.5rem auto;
height: 2.3rem;
display: block;
border: thin solid #999;
border-radius: 5px;
}
input[type='text']:focus{
width: 90%;
height: 2.3rem;
margin: 1.5rem auto;
box-shadow: 0 0 2px 2px #3E82F7;
outline: 0;
}
.container{
width: 100%;
height:200px;
overflow: hidden;
position: relative;
}
.slide{
width: 300%;
height: 200px;
position: absolute;
top: 0;
left: 0;
}
.slide li{
width:33.333%;
height: 200px;
list-style: none;
line-height: 200px;
color: #fff;
text-align: center;
font-size: 24px;
float: left;
}
.slide li:first-child{
background-color: yellow;
}
.slide li:last-child{
background-color: red;
}
.slide li:nth-child(2){
background-color: green;
}
.numer{
position:absolute;
bottom: 1rem;
right: 1rem;
width: 100px;
height: 2rem;
display: flex;
justify-content: space-between;
}
.numer a{
width: 32.8%;
height: 2rem;
line-height: 2rem;
text-align: center;
background:rgba(255,255,255,0.9);
text-decoration: none;
}
//以下left值设置的都是.slide这整个块相对于左侧的距离。
#slide_1:target ~ .slide{
transition: left 1s;
left: 0;
}
#slide_2:target ~ .slide{
transition: left 1s;
left:-100%;
}
#slide_3:target ~ .slide{
transition: left 1s;
left:-200%;
}
</style>
</head>
<body>
<ul class="rank">
<li>
<span>排名</span>
<span>网站</span>
<span>热度</span>
</li>
<li>
<span>1</span>
<span>百度前端技术学院</span>
<span>12000</span>
</li>
<li>
<span>2</span>
<span>百度前端技术学院</span>
<span>11000</span>
</li>
<li>
<span>3</span>
<span>百度前端技术学院</span>
<span>10000</span>
</li>
<li>
<span>4</span>
<span>百度前端技术学院</span>
<span>9000</span>
</li>
<li>
<span>5</span>
<span>百度前端技术学院</span>
<span>8000</span>
</li>
<li>
<span>6</span>
<span>百度前端技术学院</span>
<span>7000</span>
</li>
<li>
<span>7</span>
<span>百度前端技术学院</span>
<span>6000</span>
</li>
<li>
<span>6</span>
<span>百度前端技术学院</span>
<span>5000</span>
</li>
<li>
<span>4</span>
<span>百度前端技术学院</span>
<span>4000</span>
</li>
<li>
<span>3</span>
<span>百度前端技术学院</span>
<span>3000</span>
</li>
</ul>
<input type="text" name="">
<div class="container">
<span id="slide_1"></span>
<span id="slide_2"></span>
<span id="slide_3"></span>
<ul class="slide">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<div class="numer">
<a href="#slide_1">1</a>
<a href="#slide_2">2</a>
<a href="#slide_3">3</a>
</div>
</div>
</body>
</html>
参考文献
css中“~”和“>”是什么意思？
CSS3 :target 选择器
写给自己
与其说自己是沉默寡言不如说是懒惰，懒得交际，懒得总结，认识春哥之前从未写过总结这些东西，学过的东西大多也随之淡忘,现在春哥走了之后也一直在坚持总结，之所以坚持是因为这个习惯真的很好，其实写这一篇之前还在纠结写还是不写，虽然辞藻各方面可能还不够精炼，但是本着日后自己回过头还能够看懂这些，写的也是通俗易懂了。
这里想起一个自己切身的故事，关于好的事情就该坚持，勉强自己也该坚持，我自小不爱吃姜，小时候见父亲稍稍感到感冒征兆喝姜汤一碗干完时，觉得不可思议，那么难吃的东西竟然也能下咽，这一想法一直延续到高中，‘王萍’这一伟人改变了我的想法，一次吃午饭，她吃掉盘子所有配菜——“姜”，我问她：“你喜欢吃姜呀”，她说：“不爱吃，但是它对身体好啊”，听了这句话我一激灵，然后一直铭记着。
对于好的事情该不该勉强自己去做，我时常会纠结一二，这里谨此表达自己拙见。
希望努力着的我们，无论身处何种环境都不被其影响，“时光荏苒，初心不变。”
