（重点章节复习以及代码调整笔记）选择器：伪类和伪元素选择器（部分）
?
1、代碼的編寫除了可以把樣式一樣的使用同樣的類選擇器，還可以把各個選擇器合在一起，寫同樣的樣式語句。可以避免樣式的重復書寫。
例如以下可以把多個選擇器寫在一起。
.nav-item a:hover,
.dd a:hover,
.info-title .fr:hover,
.more:hover,
.application-item a:hover,
.link-block a:hover,
.link-item a:hover {
??? color: #fca242;
??? transform: translate(2px,2px);
??? text-shadow: 1px 1px 5px #fca242;
}
?
?
2、偽類選擇器：感覺知己這一塊用得不好。只會用first-child和last-child，和a標簽的幾個偽類選擇器。其實還有一些也是很好用的，比如以下選擇器：
?
選擇器??? :before和:after這一塊還不是很會用
?
.link-block h2 .split::before { content: " / " }
(第一份頁面中的有過的一個例子，我寫的是在html中用一個span標簽放斜杠，今天看了鳳婷的代碼才發現原來可以這樣寫。對比了一下她的css代碼足足少了我的一百行，我還要更好的調整自己的代碼結構才可以。)
:before能夠完成其他選擇器無法完成的一下事情，能指定元素的前面添加內容。假設：要講top放在某些段落之前，可以寫一下句子
p.tip:before {content：”top” }
?
:after 和 :before 是相反的
在css3中寫? ::before?? ?::after
?
?
選擇器?? ::section{ color:red;? background-color:balck; }
?? Section是針對訪問者在網上選中的項目，當鼠標單擊并拖動文本時顯示出來的文本樣式。比如選中一小段文字時，該段文字會變色，背景顏色為也會改變。就是用section控制的。
如：
P:: section{
color:red;
background-color:pink;
}
Section只能有color和background-color這兩個屬性
?
選擇器、nth-child（） ? ? ? ? ? ? ? ? 在第一個頁面中的導航欄中的圖標插入中還可以有不同的方法來編寫。
| 使用nth-child （復制自陳鳳婷的代碼） | 直接使用類選擇器 （我自己的代碼） |
| Html代碼： ? <ul class="fr"> ????????????????? <li class="nav-item selected"><a href="#"><span class="image"></span>首頁</a></li> ????????????????? <li class="nav-item"><a href="#"><span class="image"></span>關于我們</a></li> ????????????????? <li class="nav-item"><a href="#"><span class="image"></span>案例</a></li> ????????????????? <li class="nav-item"><a href="#"><span class="image"></span>服務</a></li> ????????????????? <li class="nav-item"><a href="#"><span class="image"></span>觀點</a></li> ????????????????? <li class="nav-item"><a href="#"><span class="image"></span>招聘</a></li> ????????????????? <li class="nav-item"><a href="#"><span class="image"></span>聯系</a></li> ????????????? </ul> | Html代碼 ? <nav class="nav-link"> ???????????????????????? <ul > ???????????????????????? ??? <li><a href="#"><div class="icon contect"></div>聯系</a></li> ???????????????????????? ??? <li><a href="#"><div class="icon employee"></div>招聘</a></li> ???????????????????????? ??? <li><a href="#"><div class="icon view"></div>觀點</a></li> ???????????????????????? ??? <li><a href="#"><div class="icon service"></div>服務</a></li> ???????????????????????? ??? <li><a href="#"><div class="icon case"></div>案例</a></li> ???????????????????????? ??? <li><a href="#"><div class="icon about"></div>關于我們</a></li> ???????????????????????? ???? <li><a href="#"><div class="icon home"></div>首頁</a></li>? ???????????????????????? ?</ul> ???????????????????? </nav> |
| Css代碼 ? .nav-item:nth-child(1) span { ??? width: 28px; ??? height: 23px; ??? background-position: 0 -132px; } .nav-item:nth-child(2) span { ??? width: 23px; ??? height: 23px; ??? background-position: 0 -64px; } .nav-item:nth-child(3) span { ??? width: 23px; ??? height: 23px; ??? background-position: 0 -87px; } .nav-item:nth-child(4) span { ??? width: 17px; ??? height: 21px; ??? margin-bottom: 9px; ??? background-position: 0 -22px; } .nav-item:nth-child(5) span { ??? width: 28px; ??? height: 22px; ??? margin-bottom: 8px; ??? background-position: 0 -110px; } .nav-item:nth-child(6) span { ??? width: 29px; ??? height: 21px; ??? margin-bottom: 9px; ??? background-position: 0 -155px; } .nav-item:nth-child(7) span { ??? width: 13px; ??? height: 22px; ??? margin-bottom: 8px; ??? background-position: 0 0; } | Css代碼： ? .home{ ??? width: 28px; ??? height: 23px; ??? background-position: 0 0; } .nav-link li:hover .home { ??? width: 28px; ??? height: 23px; ??? background-position: 0 -30px; } .about{ ??? width: 23px; ??? height: 23px; ??? background-position: -30px 0; } .nav-link li:hover .about { ??? width: 23px; ??? height: 23px; ??? background-position: -30px -30px; } .case{ ??? width: 23px; ??? height: 23px; ??? background-position: -60px 0; } .nav-link li:hover .case { ??? width: 23px; ??? height: 23px; ??? background-position: -60px -30px; } .service{ ??? width: 17px; ??? height: 21px; ??? margin-left: 40px; ??? background-position: -90px 0; } .nav-link li:hover .service{ ??? width: 17px; ??? height: 21px; ??? background-position: -90px -30px; } .view{ ??? width: 29px; ??? height: 22px; ??? background-position: -120px 0; } .nav-link li:hover .view { ??? width: 29px; ??? height: 22px; ??? background-position: -120px -30px; } .employee{ ??? width: 29px; ??? height: 21px; ??? background-position: -150px 0; } |
其實要說兩個都是可以的。并且我覺得我自己的那種方法比較簡單明了一點。就是多會了一種方法。說不定之后會用到。
?
書本《css秘笈第3版》第三章：選擇器：明確設置哪些樣式
?
?
版權聲明：此文為作者原創，未經作者同意，不得私自轉載。http://www.cnblogs.com/lal-fighting/
轉載于:https://www.cnblogs.com/lal-fighting/p/5137746.html
總結
以上是生活随笔為你收集整理的（重点章节复习以及代码调整笔记）选择器：伪类和伪元素选择器（部分）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： spring websocket Con
- 下一篇： cordova sqlite