一天搞定CSS CSS選擇器優先順序 08

2022-02-21 14:24:31 字數 1781 閱讀 7557

選擇器優先順序:是指**的執行順序

通俗的說,就是多個選擇器同時對乙個標籤分別新增樣式,那麼這個標籤顯示那個選擇器設定的樣式

優先順序相同,誰後誰優先

優先順序不同,優先順序高的優先

**演示

charset="utf-8">

title>

/*1.選擇器的優先順序一至的情況下,誰在後誰的優先順序就高*/

/*div

div*/

/*2.選擇器的優先順序不一致的情況下,會選擇優先順序高的---這裡class>div*/

.box

divstyle>

head>

class="box">

div>

body>

html>

行間》id>class>標籤》萬用字元

**演示

charset="utf-8">

title>

/*3.行間樣式》id選擇器》類選擇器》標籤選擇器》萬用字元選擇器(*)*/

body *

div.div1

#box

style>

head>

id="box"

class="div1"

style="background: pink;">

div>

body>

html>

包含選擇器的優先順序是一種累加的關係,加起來的值越大優先順序就越高,值越小優先順序就低

**演示

charset="utf-8">

title>

/*4.包含選擇器的優先順序是一種累加的關係,加起來的值越大優先順序就越高,值越小優先順序就低*/

#div3

/*10+100=110*/

.box2

#div3

/*100+10=110*/

#div1

.box3

/*100+10=110*/

#div2

.box3

/*100+1+1=102*/

#div1

divdiv

style>

head>

class="box1"

id="div1">

class="box2"

id="div2">

class="box3"

id="div3">

div>

div>

div>

body>

html>群組選擇器的優先順序取決於位置,誰靠後誰的優先順序就高,會把前面的樣式給覆蓋了

**演示

charset="utf-8">

title>

/*5.群組選擇器的優先順序取決於位置,誰靠後誰的優先順序就高,會把前面的樣式給覆蓋了*/

div,p,h1

divstyle>

head>

div>

p>

h1>

body>

html>

一天搞定CSS css選擇器 07

選擇器 是指選擇標籤的方法 演示 演示 演示 演示 charset utf 8 title div,p,section,title1,title2,head style head div p section id title1 h1 id title2 h2 class head header bo...

CSS CSS常用選擇器

div是乙個html的標籤,單獨使用沒有意義,必須結合css使用 是乙個塊級元素,單獨佔一行 它主要用於頁面的布局 div是乙個html的標籤,單獨使用沒有意義,必須結合css使用 是乙個內聯元素,顯示一行 它主要用於對括起來的內容進行樣式的修飾 層疊樣式表 同一元素,同一屬性,設定不同值 解決內容...

css css常用的選擇器

css的選擇器有標籤選擇器 類選擇器 id選擇器 層級選擇器 組選擇器 偽類選擇器 選擇器表示方式 標籤選擇器 直接使用標籤名 類選擇器 標籤指定class屬性,用 類名 表示 id選擇器 標籤指定id屬性,用 id名 表示 層級選擇器 標籤裡內嵌標籤,可以使用空格隔開定位後代標籤 組選擇器 選擇器...