前端之选择器-37
前端之選擇器-37 ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- 基礎(chǔ)選擇器
1、通配選擇器* {border: solid;
}
匹配文檔中所有標(biāo)簽：通常指html、body及body中所有顯示類(lèi)的標(biāo)簽
2、標(biāo)簽選擇器
div {background-color: yellow;
}
匹配文檔中所有與標(biāo)簽名匹配的標(biāo)簽：如div{}會(huì)匹配文檔中全部div，span{}會(huì)匹配文檔中所有span
3、類(lèi)選擇器
.red {color: red;
}
匹配文檔中所有擁有class屬性且屬性值為red的標(biāo)簽：
如<sup class="red"></sup><sub class="red"></sub>均會(huì)被匹配
4、id選擇器
#div {text-align: center;
}
匹配文檔中所有擁有id屬性且屬性值為div的標(biāo)簽：
如<div id="div"></div><section id="div"></section>均會(huì)被匹配
5 選擇器優(yōu)先級(jí)
基礎(chǔ)選擇器優(yōu)先級(jí)大致與選擇器匹配范圍成反比，匹配范圍越小，優(yōu)先級(jí)越高
基礎(chǔ)選擇器優(yōu)先級(jí)大致與選擇器匹配精度成正比，匹配精度越高，優(yōu)先級(jí)越高
基礎(chǔ)選擇器優(yōu)先級(jí)：id選擇器 > 類(lèi)選擇器 > 標(biāo)簽選擇器 > 通配選擇器<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>css選擇器</title><style type="text/css">/*總結(jié):*//*1.通配選擇器一般用于整體reset操作(reset操作:清除系統(tǒng)自定義樣式)*//** {margin: 0;}*//*2.標(biāo)簽與id選擇器運(yùn)用場(chǎng)景并不多,一般不提倡采用id選擇器進(jìn)行布局*//*3.類(lèi)選擇器為布局首選(建議基本全用class選擇器進(jìn)行布局)*//*目標(biāo)對(duì)象:<div class="d" id="ele">d_2</div>*/* {text-align: left;}div {text-align: right;}.d {text-align: center;}#ele {text-align: left;}</style>
</head>
<body><div class="dd">d_1</div><section>s_1</section><div class="d" id="ele">d_2</div><section class="dd">s_2</section><span></span>
</body>
</html> ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- ??01_css組合選擇器
??02_組合選擇器優(yōu)先級(jí)
??03_屬性選擇器
??04_盒模型
??05_邊界圓角
??06_a_img_list標(biāo)簽
??07_偽類(lèi)選擇器
??08_盒模型布局
??09_w3c引導(dǎo) css組合選擇器： 群組選擇器?：控制多個(gè)（ 用逗號(hào)隔開(kāi)） 子代選擇器: 用 > 連接（標(biāo)簽下的第一個(gè)標(biāo)簽） 后代選擇器: 用空格連接（包含子代選擇器：也就是標(biāo)簽下的第一個(gè)或者第n個(gè)標(biāo)簽） 相鄰選擇器: 用 + 連接。如果需要選擇緊接在另一個(gè)元素后的元素，而且二者有相同的父元素，可以使用相鄰兄弟選擇器。 兄弟選擇器: 用~連接（同一層級(jí)）包含相鄰選擇器 交集選擇器：中間無(wú)任何連接符。即是選擇器1又是選擇器2 多類(lèi)名選擇器：給class使用。中間無(wú)連接符。通過(guò)多個(gè)類(lèi)名來(lái)精確的確定一個(gè)class。 例子：
? ? ? ??/*群組選擇器: ,隔開(kāi)*/
?? ? ? ?/*控制多個(gè)*/
?? ? ? ?div,?.s,?section?{
?? ? ? ? ? ?color:?red;
?? ? ? ?}
?? ? ? ?/*子代選擇器: >連接*/
?? ? ? ?body?>?div?{
?? ? ? ? ? ?color:?orange;
?? ? ? ?}
?? ? ? ?/*div > a {
?? ? ? ? ? ?text-decoration: none;
?? ? ? ?}*/
?? ? ? ?/*后代選擇器: 空格連接*/
?? ? ? ?/*包含子代選擇器*/
?? ? ? ?body a?{
?? ? ? ? ? ?text-decoration:?none;
?? ? ? ?}
?? ? ? ?/*相鄰選擇器: +連接*/
?? ? ? ?span?+?section?{
?? ? ? ? ? ?background-color:?pink;
?? ? ? ?}
?? ? ? ?/*兄弟選擇器: ~連接*/
?? ? ? ?/*包含相鄰選擇器*/
?? ? ? ?div?~?section?{
?? ? ? ? ? ?background-color:?brown;
?? ? ? ?}
?? ? ? ?
?? ? ? ?/*交集選擇器*/
?? ? ? ?/*即是選擇器1又是選擇器2*/
?? ? ? ?i.s?{
?? ? ? ? ? ?color:?yellow;
?? ? ? ?}
?? ? ? ?
?? ? ? ?/*多類(lèi)名選擇器*/
?? ? ? ?.d1?{
?? ? ? ? ? ?color:?blue;
?? ? ? ?}
?? ? ? ?.d1.d2?{
?? ? ? ? ? ?color:?tan;
?? ? ? ?}
?? ? ? ?.d1.d2.d3?{
?? ? ? ? ? ?color:?#780;
?? ? ? ?} 組合選擇器優(yōu)先級(jí) 同目錄結(jié)構(gòu)下 1.子代與后代優(yōu)先級(jí)相同 body > div == body div 2.相鄰與兄弟優(yōu)先級(jí)相同 div + span == div ~ span 3.最終樣式采用邏輯后的樣式值（寫(xiě)在后面的發(fā)揮作用） 不同目錄結(jié)構(gòu)下 1.根據(jù)選擇器權(quán)值進(jìn)行比較 2.權(quán)值為標(biāo)簽權(quán)重之和 3.權(quán)重: *:1 div:10 class:100 id:1000 !important:10000 4.權(quán)值比較時(shí),關(guān)心的是值大小,不關(guān)心位置與具體選擇器名 5.id永遠(yuǎn)比class大,class永遠(yuǎn)比標(biāo)簽大 注:控制的是同一目標(biāo),才具有可比性 /*權(quán)重10*/
div?{
color:?red;
}
/*權(quán)重20*/
div div?{
color:?yellow;
}
/*大于一切標(biāo)簽*/
.d2?{
color:?blue;
}
/*.d2抵消,剩權(quán)重10*/
div?.d2?{
color:?orange;
}
/*等價(jià)于div .d2,權(quán)值相同,位置決定*/
.d1 div?{
color:?pink;
}
/*又多10*/
div?.d1 div?{
color:?tan;
}
/*不具有可比性*/
div?.d1?>?div{
color:?green;
} 屬性選擇器 屬性選擇器權(quán)重 == class選擇器權(quán)重 有一個(gè)描述就加權(quán)重 屬性以什么開(kāi)頭: ^= 屬性以什么結(jié)尾: $= 屬性模糊匹配: *= ? ? ? ??.d2?{
?? ? ? ? ? ?color:?red;
?? ? ? ?}
?? ? ? ?
?? ? ? ?/*有屬性class的所有標(biāo)簽*/
?? ? ? ?[class]?{
?? ? ? ? ? ?color:?orange;
?? ? ? ?}
?? ? ? ?/*有屬性class且值為d2的所有標(biāo)簽(值不影響權(quán)重)*/
?? ? ? ?[class="d2"]?{
?? ? ? ? ? ?color:?pink;
?? ? ? ?}
?? ? ? ?
?? ? ? ?/*是div且class='d2',增加了權(quán)重（div權(quán)重為10）*/
?? ? ? ?div[class='d2']?{
?? ? ? ? ? ?color:?blue;
?? ? ? ?}
?? ? ? ?/*有一個(gè)描述就加權(quán)重*/
?? ? ? ?/*屬性以什么開(kāi)頭: ^= */
?? ? ? ?/*屬性以什么結(jié)尾: $= */
?? ? ? ?/*屬性模糊匹配: *= */
?? ? ? ?[class?^=?'he']?{
?? ? ? ? ? ?color:?yellow;
?? ? ? ?}
?? ? ? ?[class?$=?'ld']?{
?? ? ? ? ? ?color:?tan;
?? ? ? ?}
?? ? ? ?[class?*=?'ow']?{
?? ? ? ? ? ?color:?cyan;
?? ? ? ?}
? ? ? ??/*下面的dd為自定義屬性*/
?? ? ? ?[class][dd]?{
?? ? ? ? ? ?color:?brown;
?? ? ? ?} 盒模型 這是一個(gè)網(wǎng)頁(yè)中截取的盒模型示意圖
?? ? ? ?border-radius:5px?10px?15px?20px/? ??15px?20px??30px??50px;} 效果如圖：
?? ? ? ?a?{
?? ? ? ? ? ?color:?#333;
?? ? ? ? ? ?text-decoration:?none;?/*去除下劃線*/
?? ? ? ? ? ?outline:?0;? ? ?/*outline （輪廓）是繪制于元素周?chē)囊粭l線，
????????????于邊框邊緣的外圍，可起到突出元素的作用。*/
?? ? ? ?}
</head>
<body>
?? ?<!--?一.基本使用?-->
?? ?<!--?超鏈接標(biāo)簽:a?-->
?? ?<!--?雙/行/單一類(lèi)型標(biāo)簽?-->
?? ?<a href="https://www.baidu.com">前往百度</a>
?? ?<a href="./05_邊界圓角.html">前往邊界圓角頁(yè)面</a>
?? ?<!--?./或省略代表當(dāng)前文件所在路徑,可以訪問(wèn)與該文件同路徑下的所有文件及文件夾?-->
?? ?<a href="./temp/temp.html">前往temp頁(yè)面</a>
?? ?<!--?二.屬性?-->
?? ?<!--?title:鼠標(biāo)懸浮的文本提示?-->
?? ?<!--?target:_blank,新開(kāi)空白標(biāo)簽位來(lái)打開(kāi)目標(biāo)頁(yè)面?-->
?? ?<a href="http://sina.com.cn"?title="新浪網(wǎng)"?target="_blank">前往新浪</a>
?? ?<!--?三.其他應(yīng)用場(chǎng)景?-->
?? ?<!--?mailto?|?sms?|?tel?-->
?? ?<a href="mailto:zero@163.com">信息給zero</a>
?? ?
?? ?<!--?四.錨點(diǎn)?-->
?? ?<!--?a與a href="#錨點(diǎn)名"?--?name="錨點(diǎn)名"?-->
?? ?<!--?a與標(biāo)簽?href="#錨點(diǎn)名"?--?id="錨點(diǎn)名"?-->
?? ?<a href="#tag">前往底部</a>
?? ?<!--?測(cè)試錨點(diǎn)請(qǐng)tab?-->
?? ?br?*?100
?? ?<!--?設(shè)置一個(gè)錨點(diǎn)?-->
?? ?<!--?.bottom做底部布局的區(qū)域?-->
?? ?<div?class="bottom">
?? ? ? ?<a name="tag"></a>
?? ? ? ?<!--?<i id="tag"></i>?-->
?? ? ? ?<!--?<div id="tag"></div>?-->
?? ? ? ?...
??02_組合選擇器優(yōu)先級(jí)
??03_屬性選擇器
??04_盒模型
??05_邊界圓角
??06_a_img_list標(biāo)簽
??07_偽類(lèi)選擇器
??08_盒模型布局
??09_w3c引導(dǎo) css組合選擇器： 群組選擇器?：控制多個(gè)（ 用逗號(hào)隔開(kāi)） 子代選擇器: 用 > 連接（標(biāo)簽下的第一個(gè)標(biāo)簽） 后代選擇器: 用空格連接（包含子代選擇器：也就是標(biāo)簽下的第一個(gè)或者第n個(gè)標(biāo)簽） 相鄰選擇器: 用 + 連接。如果需要選擇緊接在另一個(gè)元素后的元素，而且二者有相同的父元素，可以使用相鄰兄弟選擇器。 兄弟選擇器: 用~連接（同一層級(jí)）包含相鄰選擇器 交集選擇器：中間無(wú)任何連接符。即是選擇器1又是選擇器2 多類(lèi)名選擇器：給class使用。中間無(wú)連接符。通過(guò)多個(gè)類(lèi)名來(lái)精確的確定一個(gè)class。 例子：
? ? ? ??/*群組選擇器: ,隔開(kāi)*/
?? ? ? ?/*控制多個(gè)*/
?? ? ? ?div,?.s,?section?{
?? ? ? ? ? ?color:?red;
?? ? ? ?}
?? ? ? ?/*子代選擇器: >連接*/
?? ? ? ?body?>?div?{
?? ? ? ? ? ?color:?orange;
?? ? ? ?}
?? ? ? ?/*div > a {
?? ? ? ? ? ?text-decoration: none;
?? ? ? ?}*/
?? ? ? ?/*后代選擇器: 空格連接*/
?? ? ? ?/*包含子代選擇器*/
?? ? ? ?body a?{
?? ? ? ? ? ?text-decoration:?none;
?? ? ? ?}
?? ? ? ?/*相鄰選擇器: +連接*/
?? ? ? ?span?+?section?{
?? ? ? ? ? ?background-color:?pink;
?? ? ? ?}
?? ? ? ?/*兄弟選擇器: ~連接*/
?? ? ? ?/*包含相鄰選擇器*/
?? ? ? ?div?~?section?{
?? ? ? ? ? ?background-color:?brown;
?? ? ? ?}
?? ? ? ?
?? ? ? ?/*交集選擇器*/
?? ? ? ?/*即是選擇器1又是選擇器2*/
?? ? ? ?i.s?{
?? ? ? ? ? ?color:?yellow;
?? ? ? ?}
?? ? ? ?
?? ? ? ?/*多類(lèi)名選擇器*/
?? ? ? ?.d1?{
?? ? ? ? ? ?color:?blue;
?? ? ? ?}
?? ? ? ?.d1.d2?{
?? ? ? ? ? ?color:?tan;
?? ? ? ?}
?? ? ? ?.d1.d2.d3?{
?? ? ? ? ? ?color:?#780;
?? ? ? ?} 組合選擇器優(yōu)先級(jí) 同目錄結(jié)構(gòu)下 1.子代與后代優(yōu)先級(jí)相同 body > div == body div 2.相鄰與兄弟優(yōu)先級(jí)相同 div + span == div ~ span 3.最終樣式采用邏輯后的樣式值（寫(xiě)在后面的發(fā)揮作用） 不同目錄結(jié)構(gòu)下 1.根據(jù)選擇器權(quán)值進(jìn)行比較 2.權(quán)值為標(biāo)簽權(quán)重之和 3.權(quán)重: *:1 div:10 class:100 id:1000 !important:10000 4.權(quán)值比較時(shí),關(guān)心的是值大小,不關(guān)心位置與具體選擇器名 5.id永遠(yuǎn)比class大,class永遠(yuǎn)比標(biāo)簽大 注:控制的是同一目標(biāo),才具有可比性 /*權(quán)重10*/
div?{
color:?red;
}
/*權(quán)重20*/
div div?{
color:?yellow;
}
/*大于一切標(biāo)簽*/
.d2?{
color:?blue;
}
/*.d2抵消,剩權(quán)重10*/
div?.d2?{
color:?orange;
}
/*等價(jià)于div .d2,權(quán)值相同,位置決定*/
.d1 div?{
color:?pink;
}
/*又多10*/
div?.d1 div?{
color:?tan;
}
/*不具有可比性*/
div?.d1?>?div{
color:?green;
} 屬性選擇器 屬性選擇器權(quán)重 == class選擇器權(quán)重 有一個(gè)描述就加權(quán)重 屬性以什么開(kāi)頭: ^= 屬性以什么結(jié)尾: $= 屬性模糊匹配: *= ? ? ? ??.d2?{
?? ? ? ? ? ?color:?red;
?? ? ? ?}
?? ? ? ?
?? ? ? ?/*有屬性class的所有標(biāo)簽*/
?? ? ? ?[class]?{
?? ? ? ? ? ?color:?orange;
?? ? ? ?}
?? ? ? ?/*有屬性class且值為d2的所有標(biāo)簽(值不影響權(quán)重)*/
?? ? ? ?[class="d2"]?{
?? ? ? ? ? ?color:?pink;
?? ? ? ?}
?? ? ? ?
?? ? ? ?/*是div且class='d2',增加了權(quán)重（div權(quán)重為10）*/
?? ? ? ?div[class='d2']?{
?? ? ? ? ? ?color:?blue;
?? ? ? ?}
?? ? ? ?/*有一個(gè)描述就加權(quán)重*/
?? ? ? ?/*屬性以什么開(kāi)頭: ^= */
?? ? ? ?/*屬性以什么結(jié)尾: $= */
?? ? ? ?/*屬性模糊匹配: *= */
?? ? ? ?[class?^=?'he']?{
?? ? ? ? ? ?color:?yellow;
?? ? ? ?}
?? ? ? ?[class?$=?'ld']?{
?? ? ? ? ? ?color:?tan;
?? ? ? ?}
?? ? ? ?[class?*=?'ow']?{
?? ? ? ? ? ?color:?cyan;
?? ? ? ?}
? ? ? ??/*下面的dd為自定義屬性*/
?? ? ? ?[class][dd]?{
?? ? ? ? ? ?color:?brown;
?? ? ? ?} 盒模型 這是一個(gè)網(wǎng)頁(yè)中截取的盒模型示意圖
?
?
盒模型的內(nèi)容： margin(外邊距) - 清除邊框外的區(qū)域，外邊距是透明的。 border(邊框) - 圍繞在內(nèi)邊距和內(nèi)容外的邊框。 ?padding(內(nèi)邊距) - 清除內(nèi)容周?chē)膮^(qū)域，內(nèi)邊距是透明的。 ?content(內(nèi)容) - 盒子的內(nèi)容，顯示文本和圖像。 其中margin、border、padding都有上右下左（上右下左是順序） 邊界圓角 CSS3 border-radius - 指定每個(gè)圓角 如果在 border-radius 屬性中只指定一個(gè)值，那么將生成 4 個(gè) 圓角。 但是，如果你要在四個(gè)角上一一指定，遵循如下的規(guī)則： 四個(gè)值: 第一個(gè)值為左上角，第二個(gè)值為右上角，第三個(gè)值為右下角，第四個(gè)值為左下角。 三個(gè)值: 第一個(gè)值為左上角, 第二個(gè)值為右上角和左下角，第三個(gè)值為右下角 兩個(gè)值: 第一個(gè)值為左上角與右下角，第二個(gè)值為右上角與左下角 一個(gè)值： 四個(gè)圓角值相同 （也就是缺省的值和對(duì)角的值相同） 當(dāng)然 border-radius也是支持8個(gè)角設(shè)置的： ? ? ? ? ? ? ?/*? ?x軸 上1? 右2 ?下3 ?左4? /y軸 上5? ?右6? ?下7? ?左8*/?? ? ? ?border-radius:5px?10px?15px?20px/? ??15px?20px??30px??50px;} 效果如圖：
?
a_img_list標(biāo)簽 A標(biāo)簽的使用 title:鼠標(biāo)懸浮的文本提示 - target:_blank,新開(kāi)空白標(biāo)簽位來(lái)打開(kāi)目標(biāo)頁(yè)面 mailto | sms | tel：發(fā)信息 作為錨點(diǎn)使用：a與標(biāo)簽 href="#錨點(diǎn)名" ? ? ? ??/*reset操作: a標(biāo)簽一些默認(rèn)屬性的清除*/?? ? ? ?a?{
?? ? ? ? ? ?color:?#333;
?? ? ? ? ? ?text-decoration:?none;?/*去除下劃線*/
?? ? ? ? ? ?outline:?0;? ? ?/*outline （輪廓）是繪制于元素周?chē)囊粭l線，
????????????于邊框邊緣的外圍，可起到突出元素的作用。*/
?? ? ? ?}
</head>
<body>
?? ?<!--?一.基本使用?-->
?? ?<!--?超鏈接標(biāo)簽:a?-->
?? ?<!--?雙/行/單一類(lèi)型標(biāo)簽?-->
?? ?<a href="https://www.baidu.com">前往百度</a>
?? ?<a href="./05_邊界圓角.html">前往邊界圓角頁(yè)面</a>
?? ?<!--?./或省略代表當(dāng)前文件所在路徑,可以訪問(wèn)與該文件同路徑下的所有文件及文件夾?-->
?? ?<a href="./temp/temp.html">前往temp頁(yè)面</a>
?? ?<!--?二.屬性?-->
?? ?<!--?title:鼠標(biāo)懸浮的文本提示?-->
?? ?<!--?target:_blank,新開(kāi)空白標(biāo)簽位來(lái)打開(kāi)目標(biāo)頁(yè)面?-->
?? ?<a href="http://sina.com.cn"?title="新浪網(wǎng)"?target="_blank">前往新浪</a>
?? ?<!--?三.其他應(yīng)用場(chǎng)景?-->
?? ?<!--?mailto?|?sms?|?tel?-->
?? ?<a href="mailto:zero@163.com">信息給zero</a>
?? ?
?? ?<!--?四.錨點(diǎn)?-->
?? ?<!--?a與a href="#錨點(diǎn)名"?--?name="錨點(diǎn)名"?-->
?? ?<!--?a與標(biāo)簽?href="#錨點(diǎn)名"?--?id="錨點(diǎn)名"?-->
?? ?<a href="#tag">前往底部</a>
?? ?<!--?測(cè)試錨點(diǎn)請(qǐng)tab?-->
?? ?br?*?100
?? ?<!--?設(shè)置一個(gè)錨點(diǎn)?-->
?? ?<!--?.bottom做底部布局的區(qū)域?-->
?? ?<div?class="bottom">
?? ? ? ?<a name="tag"></a>
?? ? ? ?<!--?<i id="tag"></i>?-->
?? ? ? ?<!--?<div id="tag"></div>?-->
?? ? ? ?...
轉(zhuǎn)載于:https://www.cnblogs.com/jokezl/articles/10187048.html
總結(jié)
- 上一篇： rsync的基本操作
- 下一篇： Xtract 实现 VMware Vsp