css 所有选择器 实例与总结
生活随笔
收集整理的這篇文章主要介紹了
css 所有选择器 实例与总结
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
目錄
- 什么是選擇器?
- 選擇器都有那些呢?
- 標簽選擇器
- ID選擇器
- 類選擇器
- 后代選擇器
- 子代選擇器
- 組合選擇器
- 交集選擇器
- 相鄰兄弟選擇器
- 通用兄弟選擇器
- 屬性選擇器
- 偽類選擇器
什么是選擇器?
在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 代碼
執行結果
小結 更有效的使用類選擇器，能有效的減少一些冗余性的代碼,而其子元素會繼承部分父元素的屬性,不要去試圖用一個類將我們的頁面寫完,這個標簽要攜帶多個類,共同設置樣式,每個類要盡量可能的小,有公共的概念,能夠讓更多的標簽使用
類和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>執行效果
總結 如果不希望選擇任意的后代元素，而是希望縮小范圍，只選擇某個元素的子元素，請使用子元素選擇器
- 認識 通用選擇器 代碼
執行結果
總結 通用選擇器是功能最強大的選擇器,我們可以利用他的特性幫助我們在開發的時候,快速的重構樣式
組合選擇器
<!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>執行結果
總結 屬性選擇器是一種特殊類型的選擇器，它根據元素的 屬性 和屬性值來匹配元素。它們的通用語法由方括號 []組成，其中包含屬性名稱，后跟可選條件以匹配屬性的值。 屬性選擇器可以根據其匹配屬性值的方式分為兩類： 存在和值屬性選擇器和子串值屬性選擇器。
屬性選擇器的其他例子
偽類選擇器
/*偽類選擇器一般會用在超鏈接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;}執行結果
轉載于:https://www.cnblogs.com/guokaifeng/p/10993572.html
總結
以上是生活随笔為你收集整理的css 所有选择器 实例与总结的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 说说域名、二级域名和主机名的联系区别
- 下一篇： _02_使用UUID获取唯一标识