css3 選擇器總結 以及他們之間的優先順序

2021-10-04 18:19:21 字數 2187 閱讀 7223

前段時間我去面試一家挺好的公司，面試問的就是 請說出css3中你知道的幾種選擇器以及他們之間優先順序 我就從我工作中常用性進行書寫

1.類式選擇器

.classname


//例子  	選擇所有class="parent"的元素


="parent"


>


<


/div>


.parent
2.id選擇器

#idname


//例子  選擇id="child"的元素


"child"


>


<


/div>


.child
3.通用選擇器

*
4.元素選擇器

p   選擇所有元素
5.組合選擇器

element,element

div,p  選擇所有元素和元素
6.後代選擇器

element element

div p   	選擇元素內的所有元素
7.子類選擇器

div>p   選擇所有父級是  元素的 元素
8.兄弟選擇器

element+element

div+p    選擇所有緊接著元素之後的元素
element~element

div~p   div後面所有的p元素
9.屬性選擇器

9.1.[attribute]

[target]   選擇所有帶有target屬性元素
9.2 [attribute=value] 屬性等於指定值的元素

[target=name]  target屬性 等於name的元素
9.3 [attribute~=value] 所有屬性值中含有 value的值

[target~name]  target屬性中含有 name的 元素
// 屬性選擇器 不僅僅是上面的這三種 我只是拿來舉例子 因為用的比較少 就不全部拿來說了

10.偽類選擇器

10.1. 普通的偽類選擇器

element:hover

div:hover   滑鼠移上div上觸發的的樣式 離開重新恢復
element:active

a:active    選擇活動鏈結
:focus

input:focus    選擇具有焦點的輸入元素
:visited

a:visited	選擇所有訪問過的鏈結
10.2 結構偽類選擇器

:first-child

p:first-child  選擇每個p元素是其父級的第乙個子元素
:last-child

p:last-child	選擇每個p元素是其父級的最後乙個子級。
:nth-child(n)

p:nth-


child(2


)	選擇每個p元素是其父級的第二個子元素
10.3 偽類生成器選擇器

::after

div:after
::before

div:before
11

:not(selector)

:


not(selector)


:not


(p)	選擇每個並非p元素的元素
工作中常用的選擇器 就上面這些了

還有乙個很重要的知識就是他們之間的優先順序問題

瀏覽器初始繼承樣式 優先順序 最低 0 是出生的時候帶的

標籤選擇器 優先順序 低 1

類,偽類選擇器,屬性選擇器 優先順序低 10

id選擇器 優先順序 中 100

內聯樣式選擇器 高 1000

!important 優先順序最高 大於 1000

css3 選擇器 CSS3選擇器

子級選擇器用於選取帶有特定父元素的元素。書寫語法 element1 element2 注意 如果 element2 元素不是父元素 element1 的直接子元素，則不會被選擇。符號之前書寫父級的選擇器，符號之後寫子級選擇器，必須滿足父子級關係才選中標籤 相鄰兄弟選擇器可以用於選擇緊接在另乙個元素後...

css3選擇器總結

選擇器分為 共分為10種 基本選擇器 萬用字元 元素選擇器 e id選擇器 id 類選擇器 class 群組選擇器 selectori,selectorv 瀏覽器對選擇器都可使用 層次選擇器 後代選擇器 e f 子選擇器 e f 相鄰兄弟選擇器 e f 通用選擇器 e f 偽類選擇器 一般有 lin...

css3選擇器總結

繼承性 子標籤繼承父標籤樣式，預設優先順序最低。有繼承性 文字相關字型樣式 粗細 大小 顏色 型別等 無繼承性 盒子模型相關邊框 背景等 層疊性 相同標籤繼承和定義的樣式累加到一起互不衝突。優先順序 離標籤越近的選擇器優先順序越高，所以相同權重的樣式後者才生效 內聯樣式表 頭部樣式表 匯入樣式表。權...