CSS基礎–屬性選擇器、偽類選擇器
- 2019 年 10 月 10 日
- 筆記
屬性選擇器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>屬性選擇器</title> <style> .red{ color: red; } .blue{ color: blue; } .darkred{ color: darkred; } .blueviolet{ color:blueviolet; } /*屬性選擇器：屬性是相對於標籤而言。所謂屬性選擇器就是根據指定名稱的屬性的值來查找元素*/ /*1.E[attr]:查找指定的擁有attr屬性的E標籤。如查找擁有style屬性的li標籤*/ li[style]{ text-decoration: underline; } /*2.E[attr=value]:查找擁有指定的Attr屬性並且屬性值為value的E標籤。如想查找擁有class屬性並且值為Red的li標籤 =是嚴格匹配*/ li[class=red]{ /*font-size: 30px;*/ } /*3.E[attr*=value]:查找擁有指定的attr屬性並且屬性值中包含(可以在任意位置)value的E標籤*/ li[class*=red]{ /*font-size: 30px;*/ } /*4.E[attr^=value]:查找擁有指定的attr屬性並且屬性值以value開頭的E標籤*/ li[class^=blue]{ font-size: 30px; } /*5.E[attr$=value]:查找擁有指定的attr屬性並且屬性值以value開結束的E標籤*/ li[class$=blue]{ /*font-size: 30px;*/ } </style> </head> <body> <p style="">看看能不能也添加樣式</p> <ol> <li class="red" style="">河南再次發生礦難，死傷人數超過100</li> <li class="blue">禽流感次發生蔓延，溫家寶指示</li> <li class="darkred" style="">南方農作物減產絕收面積上畝</li> <li class="blue">豬流感在廣減產絕收發</li> <li class="red">全國多作物減產絕收面積上畝</li> <li class="blueviolet">豬流感在廣東群體性暴發</li> </ol> </body> </html>
兄弟選擇器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>選擇器 - 兄弟偽類</title> <style> .first{ color: red; } /*兄弟偽類： +：獲取當前元素的相鄰的滿足條件的元素 ~：獲取當前元素的滿足條件的兄弟元素*/ /*下面這句樣式說明查找 ：添加了.first樣式的標籤的相鄰的li元素 1.相鄰 2.必須是指定類型的元素*/ .first + li{ color: blue; } /*下面樣式查找添加了.first樣式的元素的所有兄弟li元素 1.必須是指定類型的元素*/ .first ~ li{ color: pink; } </style> </head> <body> <ul> <li class="first">前端與移動開發</li> <span>能不能變成藍色</span> <li>java</li> <li>javascript</li> <li>c++</li> <li>平面設計</li> </ul> </body> </html>
偽類選擇器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>選擇器 - 相對父元素的偽類</title> <style> *{ padding: 0; margin: 0; } ul{ width: 700px; height: 500px; margin:0 auto; margin-top:100px; list-style: none; border-left:1px solid #ccc; border-top:1px solid #ccc; } ul > li{ float: left; width:100px; box-sizing: border-box; height: 100px; line-height:100px; text-align: center; background-color: #fff; border-right:1px solid #ccc; border-bottom:1px solid #ccc; } /*相對於父元素的結構偽類*/ /*E:first-child:查找E元素的父級元素中的第一個E元素。在查找的時候並不會限制查找的元素的類型*/ /*下面這句樣式查找：li的父元素中的第一個li元素 1.相對於當前指定元素的父元素 2.查找的類型必須是指定的類型*/ li:first-child{ color: red; } /*E:last-child:查找E元素的父元素中最後一個指定類型的子元素*/ li:last-child{ background-color: skyblue; } /*查找的時候限制類型 first-of-type*/ /*1.也是相對於父元素 2.在查找的時候只會查找滿足類型條件的元素，過渡掉其它類型的元素*/ li:first-of-type{ color: red; } li:last-of-type{ color: orange; } /*指定索引位置 nth-child(從1開始的索引||關鍵字||表達式)*/ li:nth-child(5){ background-color: lightblue; } /*偶數個元素添加背景 even:偶數 odd:奇數*/ /*li:nth-child(even){ background-color: orange; } li:nth-child(odd){ background-color: pink; }*/ li:nth-of-type(even){ background-color: orange; } li:nth-of-type(odd){ background-color: pink; } /*想為前面的5個元素添加樣式*/ /*n:默認取值範圍為0~子元素的長度.但是當n<=0時，選取無效 0>>5 1>>4 ... 4>>1 5>>0*/ li:nth-last-of-type(-n+5){ font-size: 30px; } li:nth-of-type(-n+5){ font-size: 30px; } /*空值:沒有任何的內容，連空格都沒有*/ li:empty{ background-color: red; } </style> </head> <body> <ul> <div></div> <li> </li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> <li>10</li> <li>11</li> <li>12</li> <li>13</li> <li>14</li> <li>15</li> <li>16</li> <li>17</li> <li>18</li> <li>19</li> <li>20</li> <li>21</li> <li>22</li> <li>23</li> <li>24</li> <li>25</li> <li>26</li> <li>27</li> <li>28</li> <li>29</li> <li>30</li> <li>31</li> <li>32</li> <li>33</li> <li>34</li> <li>35</li> </ul> </body> </html>
target偽類
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS3 選擇器 -偽類target</title> <style> body { margin: 0; padding: 0; background-color: #F7F7F7; } .content { width: 960px; margin: 0 auto; padding: 30px; } p { font-size: 18px; line-height: 1.75; } ul { position: fixed; top: 100px; left: 30px; margin: 0; padding: 0; } h2:target{ color: #0000FF; } </style> </head> <body> <ul class="nav"> <li><a href="#title1">CSS (層疊樣式表)</a></li> <li><a href="#title2">實例</a></li> <li><a href="#title3">發展歷史</a></li> <li><a href="#title4">使用方法</a></li> <li><a href="#title5">布局特點</a></li> <li><a href="#title6">創建編輯</a></li> </ul> <div class="content"> <h2 id="title1">CSS (層疊樣式表)</h2> <p>層疊樣式表是一種用來表現HTML（標準通用標記語言的一個應用）或XML（標準通用標記語言的一個子集）等文件樣式的電腦語言。</p> <p>CSS目前最新版本為CSS3，是能夠真正做到網頁表現與內容分離的一種樣式設計語言。相對於傳統HTML的表現而言，CSS能夠對網頁中的對象的位置排版進行像素級的精確控制，支援幾乎所有的字體字型大小樣式，擁有對網頁對象和模型樣式編輯的能力，並能夠進行初步交互設計，是目前基於文本展示最優秀的表現設計語言。CSS能夠根據不同使用者的理解能力，簡化或者優化寫法，針對各類人群，有較強的易讀性。</p> <h2 id="title2">實例</h2> <p>如果你要在HTML元素中設置CSS樣式，你需要在元素中設置"id" 和 "class"選擇器。[1] d 選擇器可以為標有特定 id 的 HTML 元素指定特定的樣式。HTML元素以id屬性來設置id選擇器,CSS 中 id 選擇器以 "#" 來定義。以下的樣式規則應用於元素屬性 id="para1":</p> <p>class 選擇器用於描述一組元素的樣式，class選擇器有別於id選擇器，class可以在多個元素中使用。class 選擇器在HTML中以class屬性表示, 在 CSS 中，類選擇器以一個點"."號顯示：在以下的例子中，所有擁有 center 類的 HTML 元素均為居中。</p> <h2 id="title3">發展歷史</h2> <p>作為一項W3C推薦，CSS1發佈於 1996年12月17 日。1999 年1月11日，此推薦被重新修訂。</p> <p>作為一項 W3C 推薦，CSS2發佈於 1999年1月11日。CSS2添加了對媒介（印表機和聽覺設備）和可下載字體的支援。</p> <h2 id="title4">使用方法</h2> <p>有三種方法可以在站點網頁上使用樣式表：外聯式Linking（也叫外部樣式）：將網頁鏈接到外部樣式表。嵌入式Embedding（也叫內頁樣式）：在網頁上創建嵌入的樣式表。內聯式Inline（也叫行內樣式）：應用內嵌樣式到各個網頁元素。其中，優先順序：內聯式 > 嵌入式 > 外聯式</p> <p>當樣式需要被應用到很多頁面的時候，外部樣式表將是理想的選擇。使用外部樣式表，你就可以通過更改一個文件來改變整個站點的外觀。</p> <p>當特殊的樣式需要應用到個別元素時，就可以使用內聯樣式。 使用內聯樣式的方法是在相關的標籤中使用樣式屬性。樣式屬性可以包含任何 CSS 屬性。以下實例顯示出如何改變段落的顏色和左外邊距。</p> <h2 id="title5">布局特點</h2> <p>對於蜘蛛在爬行一個網站的頁面時，若是有太多的垃圾程式碼，會使搜索蜘蛛對其產生不友好、不信任感，同時蜘蛛的爬行速度也會因此而減緩，對於網站SEO而言，可謂一大忌。就如傳統的用table頁面，對此我們就需要對網站進行程式碼優化，而這便需要動用CSS+div了，下面便來談談使用CSS+div進行程式碼優化的一些益處。</p> <p>網站使用DIV+CSS布局使程式碼很是精簡，相信大多朋友也都略有所聞，css文件可以在網站的任意一個頁面進行調用，而若是使用table表格修改部分頁面卻是顯得很麻煩。要是一個門戶網站的話，需手動改很多頁面，而且看著那些表格也會感覺很亂也很浪費時間，但是使用css+div布局只需修改css文件中的一個程式碼即可。</p> <p>採用div-css布局的網站對於搜索引擎很是友好，因此其避免了Table嵌套層次過多而無法被搜索引擎抓取的問題，而且簡潔、結構化的程式碼更加有利於突出重點和適合搜索引擎抓取。</p> <h2 id="title6">創建編輯</h2> <p>創建和編輯css更加常用的是AdobeDreamweaver系列軟體，可視化編輯更利於web工程師快速的創建和編輯css，新版本CS5.0、CS5.5、CS6.0、CC，包含Adobe BrowserLab，用於針對多種瀏覽器測試css的兼容性。Adobe Dreamweaver是一個css創建和編輯必不可少的利器！</p> <p>FrontPage2000 包含有能用來為站點創建外部樣式表的模板。可以用空白模板或已包含樣式的模板來創建（例如 Arcs）。當保存樣式表時， FrontPage 會以 . css 作為文件擴展名。要編輯樣式表，請雙擊文件夾列表中的樣式表。</p> </div> </body> </html>
