css 所有選擇器 實例與總結
- 2019 年 10 月 8 日
- 筆記
目錄
什麼是選擇器?
在css中{}之前的部分就是」選擇器」,」選擇器」指明了{}中的」樣式「的作用對象，也就是說該」樣式「作用與網頁中的哪些元素。 簡單的來說,選擇器就是幫助我們,選中要作用的標籤.
選擇器都有那些呢?
- 標籤選擇器(又名 元素選擇器)
- ID選擇器
- 類選擇器
- 後代選擇器(又名 包含選擇器)
- 子代選擇器
- 組合選擇器
- 交集選擇器
- 通用選擇器
- 相鄰兄弟選擇器
- 通用兄弟選擇器
- 屬性選擇器
- 偽類選擇器
標籤選擇器
<!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>實例</title> <style type='text/css'> p,h3{ /*將 p 和 h3 用逗號分隔，就定義了一個規則。其右邊的樣式（color:red;）將應用到這兩個選擇器所引用的元素。 逗號告訴瀏覽器，規則中包含兩個不同的選擇器。如果沒有這個逗號，那麼規則的含義將完全不同*/ color:red; } </style> </head> <body> <h3>啦啦啦</h3> <p>你好</p> <img src="image/八重櫻2.jpg" width="400px" height="500px"> /*img插入圖片 設置寬 高 (單位px)*/ <p>我的朋友</p> </body> </html>
- 執行結果
- 總結,標籤選擇器可以直接作用於多個標籤(中間以逗號隔開進行選擇器分組),標籤選擇器可以選中所有的標籤元素，比如div，ul，li ，p等等，不管標籤藏的多深，都能選中，選中的是所有的，而不是某一個，所以說 "共性" 而不是 」特性「
ID選擇器
/*格式 1 以#開頭 2 其中ID選擇器名稱可以任意起名(最好不要起中文) 3 ID的名稱必須是唯一的*/ <!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>實例</title> <style type='text/css'> #tale{ color: aqua; /*設置顏色 淺綠色*/ } #tiger{ color: red; } </style> </head> <body> <p> <span id="tale">一二三四五 上山打</span><span id="tiger">老虎</span> </p> </body> </html>
- 執行結果
- 總結 同一個頁面中id不能重複,任何的標籤都可以設置id,id命名規範 要以字母,可以有數字 下劃線 – 大小寫嚴格區分 aa和AA是兩個不一樣的屬性值
類選擇器
<!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>實例</title> <style type='text/css'> .box{ width: 240px; /*設置div 寬*/ height: 240px; /*設置div 高*/ margin-top: 5px; /*設置上邊距 */ border: 5px solid black;/*設置div 邊框 參數1(邊框寬) 參數2(邊框樣式 實線) 參數3(邊框顏色)*/ background: aquamarine; /*設置div背景色 (碧綠色)*/ } .big{ background-image: url("image/a.jpg"); /*設置div背景圖 url(填圖片鏈接)*/ background-repeat: no-repeat ;/*設置背景重複方式 默認(repeat)水平和垂直方向上重複。 (no-repeat)背景圖像將僅顯示一次。 (inherit)從父元素繼承background-repeat屬性的設置。 (repeat-x)背景圖像將在水平方向重複。 (repeat-y)背景圖像將在垂直方向重複。*/ } </style> </head> <body> <div class="box" ></div> <div class="box big"></div>/*可以使用類選擇器為一個元素同時設置多個樣式。我們可以為一個元素同時設置多個樣式，但只可以用類選擇器的方法實現，ID選擇器是不可以添加多個ID名字的。*/ </body> </html>
- 執行結果
- 實例2 代碼
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>實例</title> <style> .box { color: cyan; font-size: 40px; } </style> </head> <body> <div class="box" > <span>盒子里有</span><br> <span>小動物</span> <p>小貓咪</p> <p>小跳蛙</p> <p id = "t">小老虎</p> </div> </body> </html>
- 執行結果
- 小結 更有效的使用類選擇器，能有效的減少一些冗餘性的代碼,而其子元素會繼承部分父元素的屬性,不要去試圖用一個類將我們的頁面寫完,這個標籤要攜帶多個類,共同設置樣式,每個類要盡量可能的小,有公共的概念,能夠讓更多的標籤使用
- 類和ID選擇器的區別與選擇?
/*學習了類選擇器和ID選擇器，我們會發現他們之間有很多的相似處，是否兩者可以通用使用呢？那麼，我們先來總結他們的相同點和不同點： 相同點: 可以應用於任何元素 不同點： ID選擇器只能在文檔中使用一次。與類選擇器不同，在一個HTML文檔中，ID選擇器只能使用一次，而且僅僅一次。而類選擇器可以使用多次。 到底使用id還是用class？ 答案：儘可能的用class。除非一些特殊情況可以用id 原因：id一般是用在js的。也就是說 js是通過id來獲取到標籤*/
後代選擇器
/*顧名思義，所謂後代，就是父親的所有後代(包括兒子、孫子、重孫子等)。 語法： div p{ css代碼樣式; } 使用空格表示後代選擇器，上面的div是父元素，而p是div的後代元素。*/ <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>實例</title> <style> div p{ color: cyan; /*設置顏色為 藍綠色(青色)*/ font-size: 40px; } </style> </head> <body> <div> <span>盒子里有</span> <p>小貓咪</p> <p>小跳蛙</p> </div> </body> </html>
- 執行結果
- 總結 使用後代選擇器,限定了選擇區間，哪個div下的哪個標籤。限定了獨立的邏輯區 。布局規範上來說元素嵌套一般不要超過8層為好,最大嵌套層數為256層,超出的話選擇器會失效
子代選擇器
/*子代，僅僅表示父親的親兒子，只有親兒子。使用>表示子代選擇器。 語法： div>p{css代碼樣式;} 是可以一直 div>元素>元素>元素>元素 超過256層嵌套失效....*/ <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>實例</title> <style> #box>p{ color: darkorange; /*設置顏色為 深橙色*/ font-size: 80px; } </style> </head> <body> <div id="box"> <div> <div> <div> <p> 狸花貓 </p> </div> </div> </div> <p> 大橘貓 </p> </div> </body> </body> </html>
- 執行效果
- 總結 如果不希望選擇任意的後代元素，而是希望縮小範圍，只選擇某個元素的子元素，請使用子元素選擇器
- 認識 通用選擇器 代碼
/*通用選擇器是功能最強大的選擇器，它使用一個*號來表示，它的作用是匹配html中所有標籤元素。使用它，我們可以對網頁進行重置樣式，以按照產品需求來開發對應的網頁。 對頁面中所有的文本設置為紅色 */ <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>實例</title> <style> *{ color:slateblue; /*設置顏色為石藍色*/ font-size: 20px; } </style> </head> <body> <div class="zoo"> <ul class="animal"> <li> 犬科動物 <ul> <li>犬亞科 <ul> <li>灰狼</li> <li>郊狼</li> <li>黑背胡狼</li> </ul> </li> <li>狐亞科 <ul> <li>沙狐</li> <li>赤狐</li> <li>孟加拉狐</li> </ul> </li> </ul> </li> <li> 貓科動物 <ul> <li>獵豹亞科 <ul> <li>獵豹</li> </ul> </li> <li>貓亞科 <ul> <li>豹貓</li> <li>金貓</li> <li>美洲獅</li> </ul> </li> </ul> </li> </ul> </div> </body> </html>
- 執行結果
- 總結 通用選擇器是功能最強大的選擇器,我們可以利用他的特性幫助我們在開發的時候,快速的重構樣式
組合選擇器
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>實例</title> <style> div,p,h6,span,#h,.hhh{ color: deeppink; /*設置文本顏色為 深粉色*/ } </style> </head> <body> <div> 我是盒子 </div> <p>我是p標籤</p> <h6>我是h6標籤</h6> <span>我是span標籤</span> <h1 id="h" >我是h1標籤</h1> <h3 class="hhh" >我是h3標籤</h3> </body> </html>
- 執行結果
- 總結 在要對很多元素做相同的操作的情況下,我們可以選擇組合選擇器,一般在頁面布局的時候會使用組合選擇器
交集選擇器
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>實例</title> <style> p{ color: deeppink; font-size: 30px; } .p2{ width: 150px; height:150px; } #p3{ width: 300px; height: 300px; } p.p2{ background: cyan; /*設置背景顏色為 藍綠色*/ text-align: center; /*設置文本水平 居中*/ } p#p3{ background: gold; /*設置背景顏色為 金色*/ text-align: center; /*設置文本水平 居中*/ line-height: 300px; /*設置文本行高 等於父元素高度,實現水平垂直居中*/ overflow: auto; /*內容超出部分 自動上下滾動顯示*/ }/*hidden 隱藏 auto 自動下拉顯示 fragments 超出部分,分段顯示等比例 scroll 上下左右滾軸顯示 */ </style> </head> <body> <p>出山</p> <p class="p2" >琵琶行</p> <p id="p3" >告白之夜哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇</p> </body> </html>
- 執行結果
- 總結 交集選擇器應用,其中第一個必須是標記選擇器，第二個必須是類別選擇器或者ID選擇器；這兩個選擇器之間不能有空格。作用普通的疊加樣式組
相鄰兄弟選擇器
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>實例</title> <style> .box{ width: 500px; height: 600px; font-size: 20px; background: cyan ; } .child-box1+.child-box2{ font-size: 40px; color: red; text-align: center ; } #child-box3+p{ font-size: 60px; color: brown; text-align: right ; } </style> </head> <body> <div class="box" > 我是爸爸 <div class="child-box1"> 我是大哥 </div> <div class="child-box2"> 我是二弟 </div> <div id="child-box3"> 我是三弟 </div> <p>我是打醬油的</p> </div> </body> </html>
- 執行結果
- 總結 緊接在另一元素後,二者有相同父元素
通用兄弟選擇器
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>實例</title> <style> .box{ width: 500px; height: 600px; font-size: 20px; background: cyan; } .child-box1~#child-box3{ font-size: 40px; color: red; text-align: center ; } </style> </head> <body> <div class="box" > 我是爸爸 <div class="child-box1"> 我是大哥 </div> <div class="child-box2"> 我是二弟 </div> <div id="child-box3"> 我是三弟 </div> <p>我是打醬油的</p> </div> </body> </html>
- 執行結果
- 總結 兩個元素之間有別的元素,二者有相同父元素
屬性選擇器
/*屬性選擇器會嘗試匹配精確的屬性值 [attr] 該選擇器選擇包含 attr 屬性的所有元素，不論 attr 的值為何。 [attr=val] 該選擇器僅選擇 attr 屬性被賦值為 val 的所有元素。 [attr~=val] 該選擇器僅選擇具有 attr 屬性的元素，而且要求 val 值是 attr 值包含的被空格分隔的取值列表裡中的一個。*/ <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>實例</title> <style> /* 所有具有"data-vegetable"屬性的元素將被應用綠色的文本顏色 */ [data-vegetable] { color: green } /* 所有具有"data-vegetable"屬性且屬性值剛好為"liquid"的元素將被應用金色的背景顏色 */ [data-vegetable="liquid"] { background-color: goldenrod; } /* 所有具有"data-vegetable"屬性且屬性值包含"spicy"的元素， 即使元素的屬性中還包含其他屬性值，都會被應用紅色的文本顏色 */ [data-vegetable~="spicy"] { color: red; } </style> </head> <body> <i lang="fr-FR">Poulet basquaise</i>/*巴斯基香腸*/ <ul> <li data-quantity="1kg" data-vegetable>Tomatoes</li>/*data-quantity 數量 data-vegetable 蔬菜 西紅柿*/ <li data-quantity="3" data-vegetable>Onions</li>/* 洋蔥 */ <li data-quantity="3" data-vegetable>Garlic</li>/*大蒜*/ <li data-quantity="700g" data-vegetable="not spicy like chili">Red pepper</li>/*紅辣椒*/ <li data-quantity="2kg" data-meat>Chicken</li>/*雞肉*/ <li data-quantity="optional 150g" data-meat>Bacon bits</li>/*培根片*/ <li data-quantity="optional 10ml" data-vegetable="liquid">Olive oil</li>/*液體*/ <li data-quantity="25cl" data-vegetable="liquid">White wine</li>/*白葡萄酒*/ </ul> </body> </html>
- 執行結果
- 總結 屬性選擇器是一種特殊類型的選擇器，它根據元素的 屬性 和屬性值來匹配元素。它們的通用語法由方括號
[]組成，其中包含屬性名稱，後跟可選條件以匹配屬性的值。 屬性選擇器可以根據其匹配屬性值的方式分為兩類： 存在和值屬性選擇器和子串值屬性選擇器。 - 屬性選擇器的其他例子
/*屬性選擇器使用例子*/ [for]{ color: red; } /*找到for屬性的等於username的元素 字體顏色設為紅色*/ [for='username']{ color: yellow; } /*以....開頭 ^*/ [for^='user']{ color: #008000; } /*以....結尾 $*/ [for$='vvip']{ color: red; } /*包含某元素的標籤*/ [for*="vip"]{ color: #00BFFF; } /*指定單詞的屬性*/ label[for~='user1']{ color: red; } input[type='text']{ background: red; } /*這種情況的屬性選擇器也被稱為「偽正則選擇器」，因為它們提供類似 regular expression 的靈活匹配方式（但請注意，這些選擇器並不是真正的正則表達式*/
偽類選擇器
/*偽類選擇器一般會用在超鏈接a標籤中*/ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>偽類選擇器的使用</title> <style type="text/css"> a:hover{ color:red; } </style> </head> <body> <a href="http://www.baidu.com">百度一下</a> </body> </html> /*沒有被訪問過a標籤的樣式*/ a:link { color: green; } /*訪問過後a標籤的樣式*/ a:visited { color: yellow; } /*鼠標懸浮時a標籤的樣式*/ a:hover { color: red; } /*鼠標摁住的時候a標籤的樣式*/ a:active { color: blue; }
- 執行結果
作 者：郭楷豐
