當前位置：首頁 > 前端技术 > HTML >内容正文

HTML

前端之选择器-37

發布時間：2023/12/20 HTML 27 豆豆

生活随笔收集整理的這篇文章主要介紹了前端之选择器-37 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

前端之選擇器-37 ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- 基礎選擇器 1、通配選擇器* {border: solid; } 匹配文檔中所有標簽：通常指html、body及body中所有顯示類的標簽 2、標簽選擇器 div {background-color: yellow; } 匹配文檔中所有與標簽名匹配的標簽：如div{}會匹配文檔中全部div，span{}會匹配文檔中所有span 3、類選擇器 .red {color: red; } 匹配文檔中所有擁有class屬性且屬性值為red的標簽：如<sup class="red"></sup><sub class="red"></sub>均會被匹配 4、id選擇器 #div {text-align: center; } 匹配文檔中所有擁有id屬性且屬性值為div的標簽：如<div id="div"></div><section id="div"></section>均會被匹配 5 選擇器優先級基礎選擇器優先級大致與選擇器匹配范圍成反比，匹配范圍越小，優先級越高基礎選擇器優先級大致與選擇器匹配精度成正比，匹配精度越高，優先級越高基礎選擇器優先級：id選擇器 > 類選擇器 > 標簽選擇器 > 通配選擇器<!DOCTYPE html> <html> <head><meta charset="UTF-8"><title>css選擇器</title><style type="text/css">/*總結:*//*1.通配選擇器一般用于整體reset操作(reset操作:清除系統自定義樣式)*//** {margin: 0;}*//*2.標簽與id選擇器運用場景并不多,一般不提倡采用id選擇器進行布局*//*3.類選擇器為布局首選(建議基本全用class選擇器進行布局)*//*目標對象:<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_組合選擇器優先級
??03_屬性選擇器
??04_盒模型
??05_邊界圓角
??06_a_img_list標簽
??07_偽類選擇器
??08_盒模型布局
??09_w3c引導 css組合選擇器： 群組選擇器?：控制多個（用逗號隔開） 子代選擇器: 用 > 連接（標簽下的第一個標簽） 后代選擇器: 用空格連接（包含子代選擇器：也就是標簽下的第一個或者第n個標簽） 相鄰選擇器: 用 + 連接。如果需要選擇緊接在另一個元素后的元素，而且二者有相同的父元素，可以使用相鄰兄弟選擇器。 兄弟選擇器: 用~連接（同一層級）包含相鄰選擇器 交集選擇器：中間無任何連接符。即是選擇器1又是選擇器2 多類名選擇器：給class使用。中間無連接符。通過多個類名來精確的確定一個class。例子：
? ? ? ??/*群組選擇器: ,隔開*/
?? ? ? ?/*控制多個*/
?? ? ? ?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;
?? ? ? ?}
?? ? ? ?
?? ? ? ?/*多類名選擇器*/
?? ? ? ?.d1?{
?? ? ? ? ? ?color:?blue;
?? ? ? ?}
?? ? ? ?.d1.d2?{
?? ? ? ? ? ?color:?tan;
?? ? ? ?}
?? ? ? ?.d1.d2.d3?{
?? ? ? ? ? ?color:?#780;
?? ? ? ?} 組合選擇器優先級 同目錄結構下 1.子代與后代優先級相同 body > div == body div 2.相鄰與兄弟優先級相同 div + span == div ~ span 3.最終樣式采用邏輯后的樣式值（寫在后面的發揮作用） 不同目錄結構下 1.根據選擇器權值進行比較 2.權值為標簽權重之和 3.權重: *:1 div:10 class:100 id:1000 !important:10000 4.權值比較時,關心的是值大小,不關心位置與具體選擇器名 5.id永遠比class大,class永遠比標簽大 注:控制的是同一目標,才具有可比性 /*權重10*/
div?{
color:?red;
}
/*權重20*/
div div?{
color:?yellow;
}
/*大于一切標簽*/
.d2?{
color:?blue;
}
/*.d2抵消,剩權重10*/
div?.d2?{
color:?orange;
}
/*等價于div .d2,權值相同,位置決定*/
.d1 div?{
color:?pink;
}
/*又多10*/
div?.d1 div?{
color:?tan;
}
/*不具有可比性*/
div?.d1?>?div{
color:?green;
} 屬性選擇器屬性選擇器權重 == class選擇器權重有一個描述就加權重屬性以什么開頭: ^= 屬性以什么結尾: $= 屬性模糊匹配: *= ? ? ? ??.d2?{
?? ? ? ? ? ?color:?red;
?? ? ? ?}
?? ? ? ?
?? ? ? ?/*有屬性class的所有標簽*/
?? ? ? ?[class]?{
?? ? ? ? ? ?color:?orange;
?? ? ? ?}

?? ? ? ?/*有屬性class且值為d2的所有標簽(值不影響權重)*/
?? ? ? ?[class="d2"]?{
?? ? ? ? ? ?color:?pink;
?? ? ? ?}
?? ? ? ?
?? ? ? ?/*是div且class='d2',增加了權重（div權重為10）*/
?? ? ? ?div[class='d2']?{
?? ? ? ? ? ?color:?blue;
?? ? ? ?}
?? ? ? ?/*有一個描述就加權重*/
?? ? ? ?/*屬性以什么開頭: ^= */
?? ? ? ?/*屬性以什么結尾: $= */
?? ? ? ?/*屬性模糊匹配: *= */
?? ? ? ?[class?^=?'he']?{
?? ? ? ? ? ?color:?yellow;
?? ? ? ?}
?? ? ? ?[class?$=?'ld']?{
?? ? ? ? ? ?color:?tan;
?? ? ? ?}
?? ? ? ?[class?*=?'ow']?{
?? ? ? ? ? ?color:?cyan;
?? ? ? ?}
? ? ? ??/*下面的dd為自定義屬性*/
?? ? ? ?[class][dd]?{
?? ? ? ? ? ?color:?brown;
?? ? ? ?} 盒模型這是一個網頁中截取的盒模型示意圖

盒模型的內容： margin(外邊距) - 清除邊框外的區域，外邊距是透明的。 border(邊框) - 圍繞在內邊距和內容外的邊框。 ?padding(內邊距) - 清除內容周圍的區域，內邊距是透明的。 ?content(內容) - 盒子的內容，顯示文本和圖像。其中margin、border、padding都有上右下左（上右下左是順序）邊界圓角 CSS3 border-radius - 指定每個圓角如果在 border-radius 屬性中只指定一個值，那么將生成 4 個圓角。但是，如果你要在四個角上一一指定，遵循如下的規則：四個值: 第一個值為左上角，第二個值為右上角，第三個值為右下角，第四個值為左下角。三個值: 第一個值為左上角, 第二個值為右上角和左下角，第三個值為右下角兩個值: 第一個值為左上角與右下角，第二個值為右上角與左下角一個值：四個圓角值相同 （也就是缺省的值和對角的值相同） 當然 border-radius也是支持8個角設置的： ? ? ? ? ? ? ?/*? ?x軸上1? 右2 ?下3 ?左4? /y軸上5? ?右6? ?下7? ?左8*/
?? ? ? ?border-radius:5px?10px?15px?20px/? ??15px?20px??30px??50px;} 效果如圖：

a_img_list標簽 A標簽的使用 title:鼠標懸浮的文本提示 - target:_blank,新開空白標簽位來打開目標頁面 mailto | sms | tel：發信息作為錨點使用：a與標簽 href="#錨點名" ? ? ? ??/*reset操作: a標簽一些默認屬性的清除*/
?? ? ? ?a?{
?? ? ? ? ? ?color:?#333;
?? ? ? ? ? ?text-decoration:?none;?/*去除下劃線*/
?? ? ? ? ? ?outline:?0;? ? ?/*outline （輪廓）是繪制于元素周圍的一條線，
????????????于邊框邊緣的外圍，可起到突出元素的作用。*/
?? ? ? ?}
</head>
<body>
?? ?
?? ?
?? ?
?? ?<a href="https://www.baidu.com">前往百度</a>
?? ?<a href="./05_邊界圓角.html">前往邊界圓角頁面</a>
?? ?
?? ?<a href="./temp/temp.html">前往temp頁面</a>

?? ?
?? ?
?? ?
?? ?<a href="http://sina.com.cn"?title="新浪網"?target="_blank">前往新浪</a>

?? ?
?? ?
?? ?<a href="mailto:zero@163.com">信息給zero</a>
?? ?

?? ?
?? ?
?? ?
?? ?<a href="#tag">前往底部</a>
?? ?
?? ?br?*?100
?? ?
?? ?
?? ?<div?class="bottom">
?? ? ? ?<a name="tag"></a>
?? ? ? ?
?? ? ? ?
?? ? ? ?...

轉載于:https://www.cnblogs.com/jokezl/articles/10187048.html

總結

以上是生活随笔為你收集整理的前端之选择器-37的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

选择器

上一篇： rsync的基本操作
下一篇：撩课-Web大前端每天5道面试题-Day