CSS选择器
CSS選擇器是一種用于選擇HTML或XML文檔中特定元素的模式。允許你根據(jù)元素的標簽名、類名、ID、屬性等來選擇元素，并將樣式應(yīng)用于這些選中的元素
基本選擇器
通配配選擇器
-
通配選擇器:可以選中所有的HTML元素
-
通配選擇器使用 符號
*,命中頁面所有的元素 -
語法
-
* { 屬性名:屬性值; }
-
-
通配選擇器在實際設(shè)置樣式應(yīng)用較少，在對應(yīng)場景清除樣式使用較多
元素選擇器
-
元素選擇器:使用標簽選中所有的對應(yīng)標簽統(tǒng)一設(shè)置樣式
-
語法
-
標簽名: { 屬性名:屬性值; } /* 示例 使用span標簽 選中頁面所有的span，設(shè)置字體大小為34px */ span { font-size:34px; } -
元素選擇器無法實現(xiàn)差異化設(shè)置,所有的元素都是統(tǒng)一設(shè)置
-
類選擇器
-
類選擇器: 根據(jù)元素的class值，來選中某些元素
-
步驟
- 在標簽內(nèi)設(shè)置class屬性
- 使用.class屬性值選中所有該屬性值的標簽
-
語法
-
<!-- html --> <!-- 給標簽設(shè)置同類名 歸屬于一類 --> <p class="city">北京</p> <p class="city">山西</p> <p class="city">上海</p> <!-- 如果要給標簽設(shè)置多類，則多個值中間用空格隔開--> <span class="city name">天津</span> -
/* css */ /* 使用類選擇器的時候, 使用 .類名 的方式選中*/ /* 給所有的city類 設(shè)置顏色為紅色 */ .city { corlor:red; } /* 給所有的name類 設(shè)置字體大小*/ .name { font-size:33px; }
-
元素的class值屬于不需要帶 符號
., 但是CSS的類選擇器要帶 符號., class的值是我們自定義的，不能使用純數(shù)字、中文或者以及數(shù)字開頭,盡量使用英文和數(shù)字的組合，若多個單詞組成使用-做連接,例如left-menu
ID選擇器
-
ID選擇器:根據(jù)標簽的ID屬性值，精準的選中某個元素
-
語法
-
<!-- 給該P標簽 設(shè)置一個ID值 --> <p id="on-city"> 北京 </p> -
/* 使用符號#和ID值 來命中元素 */ #on-city { font-size:33px; }
-
id 屬性值盡量由字母、數(shù)字、下劃線或者短杠組成，不能以數(shù)字開頭，最好以字母開頭，不能包含空格,區(qū)分大小寫
一個元素只能擁有一個ID屬性，多個元素的ID屬性值不能相同
一個元素可以同時擁有id和class屬性
復(fù)合選擇器
交集選擇器
-
選中同時符合多個條件的元素,且的關(guān)系
-
語法
選擇器1選擇器2選擇器3...{} -
示例
-
<h3 class="city">北京市</h3> <h3 class="city">天津市</h3> <p class="city on" id='home'>東城區(qū)</p> <p class="city">濱河區(qū)</p> -
/* 所有的city設(shè)置為紅色*/ .city { color: red; } /* 所有p標簽里面且為city類的標簽設(shè)置為綠色*/ p.city { color: green; ; } /* P標簽里面歸屬為city類 并且ID為home的標簽設(shè)置為藍色 */ p.city#home { color:blue; } /* 即是city類 又是on類的屬性 設(shè)置為黃色*/ .city.on { color:yellow; }
-
-
注意事項
-
有標簽名情況下，表前面必須寫在前面
-
id選擇器可以作為交集的條件，但是實際應(yīng)用中幾乎不用，因為id本身就是唯一選擇，可以直接命中元素
-
交集選擇器不能出現(xiàn)兩個元素選擇器，因為一個元素不可能即是
p又是span -
用的最多的交集選擇器是元素選擇器配合類名選擇器,例如
p.city
-
并集選擇器
-
并集選擇器選中多個選擇器對應(yīng)的元素，或者的關(guān)系，又稱分組選擇器
-
語法
選擇器1,選擇器2,...{},多個選擇器通過,連接 -
示例：
-
/* city類、id值為home、name類 的背景顏色設(shè)置為粉色 */ .city, #home, .name { background-color: pink; }
-
-
注意事項：
- 并集選擇器多個選擇器可以橫在一行，也可以豎著寫，一般豎著寫，語法清晰
- 任何形式的選擇器，都可以作為并集選擇器的一部分
- 并集選擇器通常用于集體聲明,可以縮小樣式表體積
關(guān)系選擇器
HTML的元素關(guān)系
父元素
-
直接包裹某個元素的元素，就是該元素的父元素
-
<div> <h1 頁面標題 </h1> <ul> <li>導(dǎo)航</li> li>導(dǎo)航</li> </ul> </div> <!-- 上述標簽,div包裹著h1和ul，那么div就是ul和h1的父元素 ul包裹著li，ul就是li的子元素 -->
子元素
- 被父元素直接包含的元素
- 上述代碼,h1和ul就是div的子元素,li就是ul的子元素
祖先元素
- 父元素的父元素.....,一直往外層找,都是祖先元素
- 代碼中,div就是li的祖先元素,如果外面還有其他標簽，也是祖先元素
- 父元素也算是祖先元素的一種
后代元素
- 子元素的子元素......,一直往里找，都是后代元素
- 子元素也是后代元素的一種
兄弟元素
- 具有相同父元素的元素，互為兄弟元素
- 代碼中
h1和ul就互為兄弟元素
后代選擇器
-
選中指定元素中，符合要求的所有后代元素
-
語法：`選擇器1 選擇器2 .. {} ，多個選擇器用空格隔開，先寫祖先，再寫后代
-
示例：
-
<!-- html --> <div class="city"> <ul> <li class="beijing">北京</li> <li>上海</li> <li><a href="#">地圖</a></li> </ul> </div> -
/* css */ /* 選中div中的ul中的所有l(wèi)i */ div ul li { color: #000; } /* 選中div中的所有a，跳過ul和li，a也是div的后代元素 */ div a { color: #000; } /* 選中類名city中的所有l(wèi)i元素 */ .city li { color: #000; } /* 選中類名city中的 所有類名為beijing里的所有l(wèi)i */ .city .beijing li{ color: #000; } -
注意事項:
-
后代選擇器最終選擇的都是后代，不選中祖先
-
一層、多層嵌套的后代，都是后代
-
使用后代選擇器時，不需要從代碼最外層的結(jié)構(gòu)開始，只要符合關(guān)系要求即可
-
-
子代選擇器
-
選中指定元素中,符合要求的子元素，先寫父，再寫子
-
子代選擇器又稱子元素選擇器、子選擇器
-
語法:選擇器1>選擇器2>...{} 多個選擇器用>隔開
-
示例
-
<div> <a href="#">張三</a> <a href="#">李四</a> <a href="#">王五</a> <p> <a href="#">趙六</a> <div class="last"> <a href="#">愛麗絲</a> </div> </p> </div> -
/* 選中div的子元素中的a標簽 ，其中p標簽中的a標簽不會選中，因為和div的關(guān)系屬于后代元素*/ div>a { color: #000; } /* 選中p標簽中的a標簽 */ p>a{ color: blue; } /* 選中div的子元素中的p標簽的子元素a標簽 */ div>p>a{ color: #000; } /* last類中的子元素中a標簽 */ .last>a{ color: #000; } -
注意事項:
- 子代選擇器最終選擇的是子代，不是其中的父級
-
兄弟選擇器
相鄰兄弟選擇器
-
選中指定元素后,符合條件的相鄰兄弟元素
-
相鄰的概念是緊挨著他的下一個，僅一個，不會向上相鄰，如果中間有間隔其他元素，也不會選擇
-
語法: 選擇器1+選擇器2
-
示例:
-
<body> <div>title</div> <a href="#">阿里巴巴</a> <a href="#">字節(jié)跳動</a> <p>京東</p> </body> -
/* 選中div下面的第一個a標簽，阿里巴巴 */ div+a{ color: #000; } /* 選中除了第一個li外的所有l(wèi)i,因為第二個li是第一個的相鄰兄弟,第三個是第二個的項鏈兄弟 */ li+li{ color: #000; }
-
通用兄弟選擇器
-
選中指定元素后,符合條件的所有兄弟元素,不會選中向上的元素，如果元素中間間隔了其他元素，則不會選中
-
語法:選擇器1~選擇器2{}
-
示例
-
/* div后的兩個a標簽都選中，不包含div */ div~a { color: #000; }
-
屬性選擇器
-
選中屬性值符合要求的元素
-
語法，一共有五種:
- [屬性名]，選中具體某個屬性的元素
- [屬性名="屬性值"]，選中包含某個屬性，且屬性值等于指定值的元素
- [屬性值^="值"]，選中包含某個屬性，且屬性值以指定的值開頭的元素
- [屬性值$="值"]，選中包含某個屬性，且屬性值以指定的值結(jié)尾的元素
- [屬性值*="值"]，選中包含某個屬性，且屬性值包含指定的值的元素
-
示例
-
<div title="beijing">北京</div> <div title="shanghai">上海</div> -
/* 選中具有title屬性的所有元素，前兩個div，不管屬性的值是什么，只要有該屬性就選中 */ [title]{ color: #000; } /* 選中屬性為title，并且屬性值會shanghai的元素，即第二個div */ [title="shanghai"] { color: #000; } /* 選中有title屬性，且title屬性值是以字母b開頭的元素 */ [title^='b'] { color: #000; } /* 選中有title屬性，且title屬性值是以字母i結(jié)尾的元素 */ [title$='b'] { color: #000; } /* 選中有title屬性，且屬性值包含字母b的元素 */ [title*='b'] { color: #000; }
-
偽類選擇器
偽類選擇器概念
-
什么是偽類
-
很像類，但不是類，是元素特殊狀態(tài)、位置或者條特定條件，一種用于選擇元素的特殊選擇器。允許根據(jù)元素的狀態(tài)、位置或其他特定條件來選擇元素，并為其應(yīng)用樣式
-
偽類選擇器以冒號:開頭，緊跟著偽類的名稱。它們可以與元素選擇器、類選擇器、ID選擇器等其他選擇器結(jié)合使用，以更精確地選擇元素
-
-
概念示例
-
假設(shè)有兩個超鏈接，點擊過的超鏈接需要變成紅色，沒有點擊過的超鏈接變成藍色，對于這兩種狀態(tài)進行樣式設(shè)置
-
動態(tài)偽類
動態(tài)偽類選擇器根據(jù)元素的狀態(tài)或用戶的交互來選擇元素
-
a:link:超鏈接未被訪問的狀態(tài)，只有超鏈接可以使用 -
a:visited:超鏈接訪問過的狀態(tài)，只有超鏈接可以使用 -
元素:hover：鼠標懸停在元素上的狀態(tài)，所有元素都可以使用 -
元素:active:元素激活(鼠標點擊下未松開)的狀態(tài)，所有元素都可以使用 -
元素:focus:獲取焦點的元素，點擊、快捷鍵、觸摸等方式選擇元素時，就是獲取焦點，只有表單類元素才能使用 -
注意事項:
- 前四個選擇器同時使用的時候注意編寫優(yōu)先級,從上到下依次是
link、visited、hover、active - 因為同一個操作可能會有多個行為狀態(tài),順序不對會出現(xiàn)覆蓋樣式的情況
- 前四個選擇器同時使用的時候注意編寫優(yōu)先級,從上到下依次是
-
使用示例:
-
/* 選中沒有訪問過的a元素 */ a:link { color: blue; } /* 選中訪問過的a元素 */ a:visited { color: red ; } /* 選中鼠標懸浮狀態(tài)的a元素 */ a:hover { color: yellow; } /* 選中激活狀態(tài)(鼠標點擊后沒有放開)的a元素 */ a:active { color: peru; } /* 選中獲取焦點的input元素 */ input:focus { background-color:burlywood; }
-
結(jié)構(gòu)偽類
結(jié)構(gòu)偽類選擇器根據(jù)元素在文檔結(jié)構(gòu)中的位置來選擇元素,和其他選擇器配合使用
-
:first-child:所有子元素中的第一個 -
:last-child:所有子元素中的最后一個 -
:nth-child(n):所有子元素的第n個 -
:first-of-type:所有同類型子元素的第一個 -
:last-of-type:所有同類型子元素的最后一個 -
:nth-of-type(n):所有同類型子元素的第n個 -
:nth-last-child(n)：所有子元素的倒數(shù)第n個，與序號3是反序 -
:nth-last-of-type(n):所有同類型子元素的倒數(shù)第n個，與序號6是反序 -
:only-child:選擇沒有兄弟的元素，即該父類只有他一個子元素 -
:only-of-type:選擇沒有同類型兄弟元素的元素 -
:root:選中頁面根元素 -
:empty:選中內(nèi)容為空的元素(空格也算內(nèi)容) -
常用(前6)結(jié)構(gòu)偽類使用示例:
-
作用域是全部子元素
-
/* 選中div的子元素中的P元素的第一個,如果div的第一個子元素不是P，則無法選中，作用域是div的直系所有子元素，不管是不是P標簽 */ div>p:first-child { color: #000; } /* 選中div的后代p元素，p的父元素是誰無所謂，但是p必須是其父元素的第一個子元素 */ div p:first-child { color: #000; } /* 父元素的第一個子元素，且為P元素，就被選中 如果第一個元素不是p則不會有選中*/ p:first-child { color: antiquewhite; } /* 選中的是div所有的子元素的最后一個,且必須最后一個子元素是P */ div>p:last-child { color: aqua; } /* 選中的是div所有子元素的第一個且為P元素，1是下標，下標從1開始而不是0，如果第一個元素是是a,那么1則選不中，用2可以選中 */ div>p:nth-child(1) { color: yellowgreen; } /* 也可以寫表達式，表達式格式用n計數(shù)，n是正無窮整數(shù),從0開始，比如2n (0*2=0,1*2=2,2*2=4),選中偶數(shù)，2n+1選中奇數(shù)(2*0+1=1,2*1+1=3),用內(nèi)置表示 even是選中偶數(shù),odd選中奇數(shù),選中前五的話就是-n+5 （-0+5=5，—1+5=4類推），表達式根據(jù)場景編寫，要注意格式必須為某n + 值，或者某n，不能值+某n 如果對應(yīng)的元素不是對應(yīng)的子類標簽，則不會選中，根據(jù)規(guī)則把符合要求且為對應(yīng)元素的標簽選中 */ div>p:nth-child(2n) { color: yellowgreen; }
-
-
作用域是同類型子元素
-
/* 選中div的P標簽子元素中第一個，作用域是所有同類型子元素，而不是所有子元素，如果子類依次是a、span、p、p，則選中第一個p */ div>p:first-of-type { color: aqua; } /* 選中div同類型子元素的最后一個，即所有P標簽的最后一個P標簽，作用域是所有同類型子元素，而不是所有子元素 */ div>p:last-of-type { color: aqua; } /* 選中div同類型子元素的第三個，即第三個P標簽，作用域是所有同類型子元素，而不是所有子元素 表達式邏輯與nth-child一致 */ div>p:nth-of-type(3) { color: #000; }
-
-
否定偽類
用于選擇不符合指定條件的元素,以
:not()的形式表示，后面跟著一個選擇器參數(shù)，用于指定不希望選擇的元素
/* 選中div的子元素中的p元素，但是排除類名是fail的 */
div>p:not(.fail)
{
color: rebeccapurple;
}
/* 選中div的子元素的p元素，但是排除title屬性值是beijing的 */
div>p:not([title="beijing"]) {
color: #000;
}
/* 選中div的子元素的p元素，排除第一個p元素 */
div>p:not(:first-child){
color: #000;
}
/* 否則偽類可以使用任意選擇器進行排除，語法正確即可 */
UI偽類
UI狀態(tài)偽類選擇器，用于選擇處于某種狀態(tài)下的UI元素，主要用于HTML表單上，根據(jù)表單元素的不同狀態(tài)，定義不同的樣式，來增強用戶體驗
UI狀態(tài)偽類選擇器的特征：指定的樣式只有在某種狀態(tài)下才起作用
表單元素的狀態(tài)包括獲得焦點、失去焦點、選中、未選中、可用、不可用、有效、無效、必填、選填、只讀等等
-
常用的UI偽類
-
:checked:被選中的復(fù)選框或者單選按鈕 -
:enable:可用的表單元素，沒有設(shè)置disabled禁用屬性 -
:disabled:不可用的表單元素,設(shè)置了disabled禁用屬性
-
-
比較詳細的UI偽類文章
<input type="checkbox">
<input type="radio">
/* 單選或者復(fù)選框被選中的時候 */
input:checked {
width: 100px;
height: 30px;
}
/* 選中被禁用的Input元素 */
input:disabled{
background-color: gray;
}
目標偽類
:target:選中錨點所指向的元素
<!-- 設(shè)置跳轉(zhuǎn)錨點 -->
<a href="#first">第一個</a>
<a href="#last">第二個</a>
<div id="first">first</div>
<div id="last">last</div>
/* 當使用錨點跳轉(zhuǎn)對對應(yīng)元素的時候，將顏色設(shè)置為紅色 */
div:target{
color:red;
}
語言偽類
:lang(),根據(jù)指定的語言選擇元素，如果元素沒有單獨設(shè)置lang,默認是hmlt標簽的默認值<html lang="zh">
<!--設(shè)置語言為英文 -->
<div lang="en">BeiJing</div>
<div lang="en">北京</div>
/* 選中div并且lang屬性設(shè)置的是en */
div:lang(en){
color: red;
}
/* 選中所有設(shè)置lang屬性是en的元素 ，如果html默認語言設(shè)置為en，則選中沒有單獨設(shè)置lang的所有元素*/
:lang(en){
color: red;
}
偽元素選擇器
偽元素:很像元素，但是不是元素，是元素的一些特殊位置
常用偽元素:
-
::first-letter:選中元素中的第一個文字 ::first-line：選中元素中第一行文字::selection：選中被鼠標選中的內(nèi)容::placholder：選中輸入框的提示文字-
::before：在元素最開始的位置,創(chuàng)建一個子元素，用content指定內(nèi)容，也可以設(shè)置其他樣式 ::after：在元素最好的位置，創(chuàng)建一個子元素，用content指定內(nèi)容，也可以設(shè)置其他樣式
<div>Lorem, ipsum dolor.</div>
<input type="text" placeholder="默認值">
<p>999</p>
<p>888</p>
/* 選中的是div中的第一個文字 */
div::first-letter {
color: red;
font-size: 30px;
}
/* 選中的div中的第一行 */
div::first-line {
color: yellow;
}
/* 選中div中被鼠輩選擇的文字 */
div::selection {
background-color: gold;
}
/* 選中input中的提示文字 */
input::placeholder {
color: #000;
}
/* 在p標簽的內(nèi)容之前 創(chuàng)建一個子元素，*/
p::before {
content: "$";
}
/* 在p標簽的內(nèi)容之后 創(chuàng)建一個子元素 */
p::after {
cursor: ".00";
color: yellow;
}
選擇器優(yōu)先級
簡單選擇器從高到低優(yōu)先級:
-
!important，在屬性值后面設(shè)置，標明該樣式優(yōu)先級為最高-
.slogan { color: pink !important; } /* 給哪個樣式加 !important 只是代表該樣式優(yōu)先級最高，而不是選擇器優(yōu)先級最高 */
-
-
行內(nèi)樣式
-
ID選擇器
-
類選擇器
-
元素選擇器
-
通配選擇器
-
繼承的樣式
復(fù)雜組合選擇器通過計算權(quán)重決定優(yōu)先級：
- 計算條件格式(a,b,c)依次對應(yīng)下面1、2、3
- ID選擇器的個數(shù)
- 類、偽類、屬性選擇器的個數(shù)
- 元素、偽元素選擇器的個數(shù)
- 權(quán)重比較規(guī)則:
- 比如兩個選擇器權(quán)重格式為 (1,0,0) 和 (0,2,2)
- 從左向右依次比較，當前位勝出之后，不會比較后面，則(1,0,0) > (0,2,2)
- 注意點:并集選擇器中每一個部分是分開計算的
如果兩個CSS選擇器的權(quán)重一樣，那么后面出現(xiàn)的選擇器將具有更高的優(yōu)先級。這意味著后面的選擇器將覆蓋先前的選擇器的樣式
CSS三大特性
層疊性
如果發(fā)生了樣式?jīng)_突，那么就會根據(jù)一定的規(guī)則(選擇器優(yōu)先級)，進行樣式的層疊(覆蓋)
繼承性
-
元素會自動擁有其父元素、或者祖先元素上設(shè)置的某些樣式
-
繼承規(guī)則是優(yōu)先繼承距離近的樣式
- 常見的可繼承樣式有
color、font-xxx、line-xxx等等，比如div設(shè)置了顏色為紅色，其中有個p標簽，默認顏色也會是紅色
- 常見的可繼承樣式有
-
可以參考mdn網(wǎng)站，查看Properties中的具體屬性可繼承描述是否為可繼承屬性
優(yōu)先級
- 選擇器的優(yōu)先級，用來確定在多個選擇器應(yīng)用于同一個元素時，哪個選擇器的樣式將被應(yīng)用的規(guī)則。CSS的優(yōu)先級是根據(jù)選擇器的特定性和來源來計算
總結(jié)
- 上一篇： mysql group by 执行原理及
- 下一篇： WPF --- 如何重写WPF原生控件样