css選擇器總結

2021-09-19 06:46:26 字數 627 閱讀 3436

今天在做專案的時候,發現選擇器有些遺忘。特寫此文章來加深記憶,也方便自己日後回顧。

//有時候為了瀏覽器內建樣式,可能會這樣寫。

//但一般不推薦!!!

*

類選擇器和id選擇器算是最常見兩種選擇器。

這裡要講一下關於選擇器優先順序。

優先順序從高到低分別為:

內聯樣式、id、class/屬性選擇器/偽類選擇器[如:hover,:focus]等、元素選擇器/偽元素選擇器[如:before,:after]

如果兩個優先順序相同,則按照宣告順序,寫在【樣式表】後面的起作用。

【注意!是在樣式表中的位置!而不是在使用的位置!】123

最後p的顏色顯示為red!!!是寫在樣式表後面的.classb起作用!

之前利用選擇器和css3動畫寫了乙個篩選選單的效果。

github位址如下:

效果如下:

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...