css選擇器總結

2021-09-10 13:17:49 字數 1246 閱讀 3668

css選擇器總結

要使用css對html頁面中的元素實現一對一,一對多或者多對一的控制,這就需要用到css選擇器。html頁面中的元素就是通過css選擇器控制的。

1.類選擇器

類選擇器根據類名來選擇前面以「.」,例:

.divone
2.元素選擇器

元素選擇器又稱標籤選擇器,例:

p
3.id選擇器

id選擇器可以讓標有特定id的html元素制定特定的樣式。根據元素id來選擇元素,具有唯一性,這意味著同一id在頁面中只能出現一次。前面以「#」,例:

#divtow
4.後代選擇器

後代選擇器也稱包含選擇器,用來選擇特定元素或元素組的後代,將對父元素的選擇放在前面子元素的選擇放在後面,中間用乙個空格分開。例:

#a #b #c
5.子選擇器

子選器與後代選擇器是有區別的,子選擇器僅指它的直接後代,或理解成子元素的第乙個後代。而後代選擇器是作用於所有子後代元素,它通過空格來選擇,而子選擇器是通過「>」進行選擇。

6.偽類選擇器

a:hover
7.通用選擇器

通用選擇器用「*」來表示。例:

*
指所有元素字型大小都是14px,也可以和後代選擇器組合使用。例:

p*
8.群組選擇器

當幾個元素樣式一樣,可以呼叫乙個宣告,元素之間用逗號隔開。例:

a,b,c
9.相鄰同胞選擇器

除了找到上面的子元素選擇器和後代選擇器,我們還希望找到兄弟之間的乙個。例:

h1+p
10.偽元素選擇器

所有偽元素選擇器都必須放在出現該偽元素的選擇器最後面,也就是說偽元素選擇器不能跟任何派生選擇器。

… … … … … … … … …

… … … … …

…注釋:部分引用資料

css選擇器 CSS選擇器總結

在前不久的專案中,實習小妹妹在乙個全域性的樣式中使用了下面這個css選擇器 content 對應的html結構大致是 實習妹子大致的意思是想要讓content下的子元素div的高度100 但是貌似她沒有真正理解first child的意義,從而導致這個全域性的樣式讓 所有頁面都出現了問題,然後我就只...

CSS總結 CSS選擇器

css3選擇器最新部分,有人也稱這種選擇器為css3結構類,下面我們通過實際的應用來具體了解他們的使用和區別,首先列出他具有的選擇方法 first child選擇某個元素的第乙個子元素 last child選擇某個元素的最後乙個子元素 nth child 選擇某個元素的乙個或多個特定的子元素 nth...

CSS選擇器總結

通用選擇器 選擇所有元素 css2 型別選擇器 element 根據型別選擇元素 css1 類選擇器 class 根據全域性屬性class的值選擇元素 css1 id選擇器 id 根據全域性屬性id的值選擇元素 css1 屬性選擇器 attr 基於屬性選擇元素 css2 attr val 選擇定義a...