<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <!--內部樣式 寫在head中--> <style type="text/css"> /* 並集選擇器 多個選擇器之間使用,（英文半角狀態）隔開 .word,#s,span{ color: green; }*/ /*交集選擇器 格式：01.標簽選擇器+類選擇器 02.標簽選擇器+ID選擇器 必須是標簽選擇器在前 div.word｛｝ 去div標簽中查找class屬性值為 word的標簽 div#s{} 去div標簽中查找id屬性值為 s的標簽 div.word{ color: green; } */ /* 后代選擇器 必須有層級關系 選擇器之前使空格隔開*/ #dv span { color: green; } </style> </head> <body> <div>這是一個div1</div> <div>這是一個div2</div> <div class="word">類選擇器</div> <div class="word">類選擇器</div> <div id="s">ID選擇器</div> <span>div外面的span</span> <div id="dv"> <span>div里面的span標簽1</span> </div> <div> <span>div里面的span標簽2</span> </div> </body> </html>
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>層次選擇器</title> <style type="text/css"> /*並集選擇器*/ p,ul{ border: 1px solid red; } /* 后代選擇器 body p{ background: pink; }*/ /* 子選擇器 body>p{ background: pink; }*/ /*相鄰的兄弟選擇器 .first+p{ background: pink; }*/ /*所有兄弟選擇器*/ .first~p{ background: pink; } </style> </head> <body> <p class="first">1</p> <p>2</p> <p>3</p> <ul> <li> <p>4</p> </li> <li> <p>5</p> </li> <li> <p>6</p> </li> </ul> </body> </html>
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>結構偽類選擇器</title> <!-- 不需要在節點上 增加 額外的屬性！ 結構偽類選擇器--> <style type="text/css"> /*01.改變ul中第一個li元素的樣式 顏色是紅色 ul li:first-child{ color: red; } */ /*02.改變ul中最后一個li元素的樣式 顏色是紅色 ul li:last-child{ color: red; } */ /*03.改變頁面中第3個p標簽 顏色是紅色 ! 只看順序 不看類型！ 001.無論p標簽隱藏的多深！ 始終是自上而下的第三個p標簽 002.body節點下面第3個元素 如果是p 就顯示樣式 body p:nth-child(3){ color: red; } */ /*04.改變頁面中第2個p標簽 顏色是紅色 先看類型 再看順序 body p:nth-of-type(2){ color: red; } */ /* 05.改變第一個ul中的第一個li 的樣式 顏色是紅色 */ ul:nth-of-type(1) li:nth-of-type(1){ color: red; } </style> </head> <body> <p>p1</p> <span>span</span> <p>p2</p> <p>p3</p> <ul> <li>u1li1</li> <li>u1li2</li> <li>u1li3</li> <li>u1li4</li> </ul> <ul> <li>u2li1</li> <li>u2li2</li> <li>u2li3</li> <li>u2li4</li> </ul> </body> </html>
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>愛奇異視頻播放列表</title> <style type="text/css"> li{ display: inline-block; /*讓li標簽中的內容一行顯示*/ } /*使用結構偽類選擇器選擇li元素下的標題元素，並設置字體大小為16px，字體顏色為#4D4D4D*/ li h4:nth-of-type(1){ font-size: 24px; color: #4D4D4D; } /*使用結構偽類選擇器選擇li下第一個p元素，設置字體大小為14px，字體顏色為 #640000*/ li p:nth-of-type(1){ font-size: 14px; color:#640000; } /*使用結構偽類選擇器選擇li下第二個p元素，設置字體大小為12px，字體顏色為藍色*/ li p:nth-of-type(2){ font-size: 12px; color:blue; } </style> </head> <body> <h3>熱播</h3> <ul> <li> <img src="images/img1.png" alt=""/> <h4>神武趙子龍</h4> <p>怒，林更新不抱網紅抱女神</p> <p>點擊次數：242445次</p> </li> <li> <img src="images/img2.png" alt=""/> <h4>旋風十一人</h4> <p>胡歌變教練在撩前女友</p> <p>點擊次數：242445次</p> </li> <li> <img src="images/img3.png" alt=""/> <h4>太陽的后裔</h4> <p>宋慧喬吃嫩草</p> <p>點擊次數：242445次</p> </li> <li> <img src="images/img4.png" alt=""/> <h4>山海經之赤影傳說</h4> <p>娜扎張翰再度聯手</p> <p>點擊次數：242445次</p> </li> </ul> </body> </html>
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>CSS3屬性選擇器的使用</title> <style type="text/css"> /*此段代碼只是讓結構更美觀，后續會詳細講解*/ .demo a { float: left; display: block; height: 50px; width: 50px; border-radius: 10px; text-align: center; background: #aac; color: blue; font: bold 20px/50px Arial; margin-right: 5px; text-decoration: none; margin: 5px; } /*存在屬性id的元素 a[id]{ background: chartreuse; }*/ /*屬性id=first的元素 a[id="first"]{ background: chartreuse; }*/ /*屬性class="links"的元素 a[class="links"]{ background: chartreuse; }*/ /*屬性class里包含links字符串的元素 a[class*="links"]{ background: chartreuse; }*/ /*屬性href里以http開頭的元素 a[href^="http"]{ background: chartreuse; }*/ /*屬性href里以png結尾的元素*/ a[href$="png"]{ background: chartreuse; } </style> </head> <body> <p class="demo"> <a href="http://www.baidu.com" class="links item first" id="first" >1</a> <a href="" class="links active item" title="test website" target="_blank" >2</a> <a href="sites/file/test.html" class="links item" >3</a> <a href="sites/file/test.png" class="links item" > 4</a> <a href="sites/file/image.jpg" class="links item" >5</a> <a href="efc" class="links item" title="website link" >6</a> <a href="/a.pdf" class="links item" >7</a> <a href="/abc.pdf" class="links item" >8</a> <a href="abcdef.doc" class="links item" >9</a> <a href="abd.doc" class="linksitem last" id="last">10</a> </p> </body> </html>