css幾種常見的選擇器

2021-10-07 13:22:21 字數 1816 閱讀 8366

選擇器是css很重要的乙個內容,我在學習css的同時,總結了一下常見的幾種選擇器 (本人目前也是web前端學習者,寫下這篇部落格希望能夠加強自己對選擇器的理解,同時也希望能夠幫助大家,能夠共同進步,如果有不足之處也希望各位大佬指出)

通用選擇器:

格式: *

通用選擇器是對本頁面所有元素進行操作的選擇器

/*通用選擇器*/

*

id選擇器:

格式: #元素id

id選擇器是一種基礎的選擇器(但是一般不會使用,因為侷限性比較高),是通過元素的id來對元素進行操作,元素的id需要自己設定,並且每個元素的id都是唯一值:

'div1'>

'div2'>

結果如圖:

3. 類選擇器:

格式: . 類名

類選擇器可以說是最常用的一類選擇器,是根據元素的class來對元素進行操作,可以對多個具有相同的class的元素進行操作:

"div1">

"div1">

測試結果如圖:

元素選擇器:

格式:元素名

並集選擇器可以同時對多個選擇器進行操作:

"div1">

"divx">

"divy">

測試結果:

後代選擇器:

格式:選擇器1 選擇器2{

用於指定元素素下的後輩元素,注意:選擇器和選擇器之間有乙個空格。

"container">

dddeee

fff

如上**,對類選擇器container後輩中的li選擇器進行操作,後代選擇器也是乙個十分常用的選擇器

測試結果:

子類選擇器

格式:

選擇器1 >選擇器2{

用於選擇指定元素的第一代子元素,區別於後代選擇器,子類選擇器只會對第一代後代起作用,後代選擇器是作用於所有的後代:

"container">

dddeee

fff

測試結果如下:

a的狀態有:

舉個簡單的例子:

"#">點我

由於測試結果不好截圖,就期待有興趣的小夥伴們自己測試一下啦!

目前本人在學習過程中主要接觸到以上幾種選擇器,但是css選擇器遠不止如此,期待在未來會寫一篇完整版的關於選擇器的理解的部落格。

幾種css選擇器

css提供了許多選擇器來實現精確地定位標籤元素,主要有以下幾種 div p.box 可以看出,div標籤和p標籤的class名都為 box 因此他們都應用該樣式,因為多個標籤可以有相同的class名,所以class選擇器應用最為廣泛。box 需要注意的是,標籤的id具有唯一性,多個標籤的id不能相同...

CSS的幾種選擇器

css指層疊樣式表,它用來定義如何顯示html元素。css是能夠真正做到網頁表現和內容分離的一種樣式設計語言。css基礎語法 css由兩部分構成 選擇器 選擇器通常為你要改變樣式的html元素 宣告有乙個屬性和乙個值組成 css的四種選擇器 1 派生選擇器 上下文選擇器 派生選擇的語法 上一級元素b...

CSS的幾種核心選擇器

標籤選擇器,選擇的是頁面上所有這種型別的標籤,優先順序較低 標籤選擇器呼叫測試 類選擇器,針對想要的所有標籤使用只需要定義class即可。類選擇器呼叫 針對特定的標籤來使用,只能對特定id使用 標籤id命名規範說明 id選擇器呼叫偽類選擇器,針對一些標籤具體的行為使用。其中對於標籤特有的狀態 而a ...