03-CSS中的選擇器
阿新 • • 發佈：2018-09-18
c-c ext for adding 字體顏色 dset 單詞 2-2 round 
高級選擇器分為：
-
後代選擇器
-
子代選擇器
-
並集選擇器
-
交集選擇器
後代選擇器
使用空格表示後代選擇器 , 顧名思義 父元素的後代(包括兒子,孫子,重孫子)
中間空格隔開 是後代 1 .container p{ 2 color: red; 3 } 4 .container .item p{ 5 color: yellow; 6 }格式 :
子代選擇器
使用> 表示子代選擇器 , 比如 div>p , 僅僅表示的是當前 div 元素選中的子代(不包含孫子.....) 元素p.
1 .container>p{ 2 color: yellowgreen; 3 }格式:
並集選擇器
多個選擇器之間使用逗號隔開, 表示選中的頁面中的多個標簽. 一些共性的元素, 可以使用並集選擇器
1 /*並集選擇器*/ 2 h3,a{ 3 color: #008000; 4 text-decoration: none; 5 6 }格式:
比如想百度首頁使用並集選擇器.
1 body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td {例子2 margin: 0; 3 padding: 0 4 } 5 /*使用此並集選擇器選中頁面中所有的標簽，頁面布局的時候會使用*/
交集選擇器
使用 .表示交集選擇器. 第一個標簽必須是標簽選擇器 , 第二個標簽必須是類選擇器
語法: div.active 比如有一個<h4 class= "active"></h4> 這樣的標簽
那麽
1 h4{ 2 width: 100px; 3 font-size: 14px; 4 } 5 .active{ 6 color: red;例如:7 text-decoration: underline; 8 } 9 /* 交集選擇器 */ 10 h4.active{ 11 background: #00BFFF; 12 }
他表示兩者選中之後元素共有的特性
屬性選擇器 *****
屬性選擇器, 字面意思就是根據標簽中的屬性 , 選中當前的標簽
語法:
/*根據屬性查找*/ 2 /*[for]{ 3 color: red; 4 }*/ 5 6 /*找到for屬性的等於username的元素 字體顏色設為紅色*/ 7 /*[for=‘username‘]{ 8 color: yellow; 9 }*/ 10 11 /*以....開頭 ^*/ 12 /*[for^=‘user‘]{ 13 color: #008000; 14 }*/ 15 16 /*以....結尾 $*/ 17 /*[for$=‘vvip‘]{ 18 color: red; 19 }*/ 20 21 /*包含某元素的標簽*/ 22 /*[for*="vip"]{ 23 color: #00BFFF; 24 }*/ 25 26 /**/ 27 28 /*指定單詞的屬性*/ 29 label[for~=‘user1‘]{ 30 color: red; 31 } 32 33 input[type=‘text‘]{ 34 background: red; 35 }
<head> <meta charset="UTF-8"> <title></title> <style>
/*舉例*/ form input[type=‘text‘]{ background-color: red; } form input[type=‘password‘]{ background-color: yellow; } form #user{ background-color: green; } </style> </head> <body> /*示例*/ <form action=""> <input type="text" id="user"> <input type="password"> </form> </body> </html>
偽類選擇器
偽類選擇器一般會用在超鏈接a標簽中 , 使用a標簽的偽類選擇器, 我們一定要遵循 " 愛恨準則" LoVe HAte
1 /*沒有被訪問的a標簽的樣式 link */ 2 .box ul li.item1 a:link{ 3 4 color: #666; 5 } 6 /*訪問過後的a標簽的樣式 visited */ 7 .box ul li.item2 a:visited{ 8 9 color: yellow; 10 } 11 /*鼠標懸停時a標簽的樣式 hover */ 12 .box ul li.item3 a:hover{ 13 14 color: green; 15 } 16 /*鼠標摁住的時候a標簽的樣式 active */ 17 .box ul li.item4 a:active{ 18 19 color: yellowgreen; 20 }
CSS3 中的選擇器nth-child()
1 /*選中第一個元素*/ 2 div ul li:first-child{ 3 font-size: 20px; 4 color: red; 5 } 6 /*選中最後一個元素*/ 7 div ul li:last-child{ 8 font-size: 20px; 9 color: yellow; 10 } 11 12 /*選中當前指定的元素 數值從1開始*/ 13 div ul li:nth-child(3){ 14 font-size: 30px; 15 color: purple; 16 } 17 18 /*n表示選中所有,這裏面必須是n, 從0開始的 0的時候表示沒有選中*/ 19 div ul li:nth-child(n){ 20 font-size: 40px; 21 color: red; 22 } 23 24 /*偶數*/ 25 div ul li:nth-child(2n){ 26 font-size: 50px; 27 color: gold; 28 } 29 /*奇數*/ 30 div ul li:nth-child(2n-1){ 31 font-size: 50px; 32 color: yellow; 33 } 34 /*隔幾換色 隔行換色 35 隔4換色 就是5n+1,隔3換色就是4n+1 36 */ 37 38 div ul li:nth-child(5n+1){ 39 font-size: 50px; 40 color: red; 41 }介紹
偽元素選擇器
/*設置第一個首字母的樣式*/ p:first-letter{ color: red; font-size: 30px; } /* 在....之前 添加內容 這個屬性使用不是很頻繁 了解 使用此偽元素選擇器一定要結合content屬性*/ p:before{ content:‘alex‘; } /*在....之後 添加內容，使用非常頻繁 通常與咱們後面要講到布局 有很大的關聯（清除浮動）*/ p:after{ content:‘&‘; color: red; font-size: 40px; }
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style> 7 p:first-letter{ 8 color: red; 9 font-size: 26px; 10 } 11 /*用偽元素 屬性一定是content*/ 12 13 /*偽元素選擇器與後面的布局有很大關系*/ 14 p:before{ 15 content: ‘$‘ 16 } 17 p:after{ 18 content: ‘.‘ 19 } 20 .box2{ 21 22 /*需求：這個盒子一定是塊級標簽 span==>塊 並且不再頁面中占位置。未來與布局有很大關系 */ 23 24 /*隱藏元素 不占位置*/ 25 /*display: none;*/ 26 display: block; 27 28 /*display: none;*/ 29 /*隱藏元素 占位置*/ 30 visibility: hidden; 31 height: 0; 32 33 } 34 35 </style> 36 </head> 37 <body> 38 <p class="box"> 39 <span>alex</span> 40 </p> 41 42 <span class="box2">alex</span> 43 <div>wusir</div> 44 45 </body> 46 </html>例子:
03-CSS中的選擇器