1.:nth-of-type(-n+b)
實(shí)現(xiàn)效果：選擇器匹配屬于父元素的特定類型的前b個子元素的每個元素。
2.input[type='text']:focus
實(shí)現(xiàn)效果：光標(biāo)觸發(fā)文本框時設(shè)置樣式苍碟。
3.*:target *
定義：URL 帶有后面跟有錨名稱 #丢胚，指向文檔內(nèi)某個具體的元素。這個被鏈接的元素就是目標(biāo)元素(target element)酣衷。
:target 選擇器可用于選取當(dāng)前活動的目標(biāo)元素
4.css中的'~'
例：#slide_1:target ~ .slide
為所有相同的父元素中位于#slide_1:target元素之后的所有.slide元素設(shè)置樣式
實(shí)例練習(xí)
注：重點(diǎn)利用css3 :target選擇器和“~”的使用實(shí)現(xiàn)簡單的輪播效果，注意代碼中的布局以及position和點(diǎn)擊按鈕左側(cè)的距離的變化。
整體代碼
<!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案例實(shí)操</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值設(shè)置的都是.slide這整個塊相對于左側(cè)的距離开呐。
#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>網(wǎng)站</span>
<span>熱度</span>
</li>
<li>
<span>1</span>
<span>百度前端技術(shù)學(xué)院</span>
<span>12000</span>
</li>
<li>
<span>2</span>
<span>百度前端技術(shù)學(xué)院</span>
<span>11000</span>
</li>
<li>
<span>3</span>
<span>百度前端技術(shù)學(xué)院</span>
<span>10000</span>
</li>
<li>
<span>4</span>
<span>百度前端技術(shù)學(xué)院</span>
<span>9000</span>
</li>
<li>
<span>5</span>
<span>百度前端技術(shù)學(xué)院</span>
<span>8000</span>
</li>
<li>
<span>6</span>
<span>百度前端技術(shù)學(xué)院</span>
<span>7000</span>
</li>
<li>
<span>7</span>
<span>百度前端技術(shù)學(xué)院</span>
<span>6000</span>
</li>
<li>
<span>6</span>
<span>百度前端技術(shù)學(xué)院</span>
<span>5000</span>
</li>
<li>
<span>4</span>
<span>百度前端技術(shù)學(xué)院</span>
<span>4000</span>
</li>
<li>
<span>3</span>
<span>百度前端技術(shù)學(xué)院</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>
參考文獻(xiàn)
css中“~”和“>”是什么意思？
CSS3 :target 選擇器
寫給自己
與其說自己是沉默寡言不如說是懶惰规求，懶得交際筐付，懶得總結(jié)，認(rèn)識春哥之前從未寫過總結(jié)這些東西阻肿，學(xué)過的東西大多也隨之淡忘,現(xiàn)在春哥走了之后也一直在堅(jiān)持總結(jié)瓦戚，之所以堅(jiān)持是因?yàn)檫@個習(xí)慣真的很好，其實(shí)寫這一篇之前還在糾結(jié)寫還是不寫丛塌，雖然辭藻各方面可能還不夠精煉较解，但是本著日后自己回過頭還能夠看懂這些畜疾，寫的也是通俗易懂了。
這里想起一個自己切身的故事印衔，關(guān)于好的事情就該堅(jiān)持啡捶，勉強(qiáng)自己也該堅(jiān)持，我自小不愛吃姜奸焙，小時候見父親稍稍感到感冒征兆喝姜湯一碗干完時届慈，覺得不可思議，那么難吃的東西竟然也能下咽忿偷，這一想法一直延續(xù)到高中金顿，‘王萍’這一偉人改變了我的想法，一次吃午飯鲤桥，她吃掉盤子所有配菜——“姜”揍拆，我問她：“你喜歡吃姜呀”，她說：“不愛吃茶凳，但是它對身體好啊”嫂拴，聽了這句話我一激靈，然后一直銘記著贮喧。
對于好的事情該不該勉強(qiáng)自己去做筒狠，我時常會糾結(jié)一二，這里謹(jǐn)此表達(dá)自己拙見箱沦。
希望努力著的我們辩恼，無論身處何種環(huán)境都不被其影響，“時光荏苒谓形，初心不變灶伊。”
