CSS之選擇器的運用

2021-09-13 22:33:49 字數 2998 閱讀 5109

css選擇器和規則:

在css宣告塊前新增乙個選擇器,用來指明將css宣告應用在哪些元素上。

如圖所示:

標籤選擇器又叫元素選擇器,換句話說,文件的元素就是最基本的選擇器,使用元素名稱直接選中元素即可。

演示**:

你好,標籤選擇器!

類選擇以點"."開頭,後面緊跟乙個類名。類名不允許有空格,與元素中class屬性的值保持一致。乙個元素可以有多個class的值,每個值通過空格分割開。類名相同的元素屬於一類元素。

演示**:

id選擇器以"#"開頭,後面緊跟乙個id名,在乙個文件中,id值不能重複,因此在選擇文件中唯一元素的時候該選擇器比較有用。

演示**:

— "good morning."

— "go away!"

使用"*」來表示普遍選擇器,表示選擇所有元素,通常用在組合選擇器中。

演示**:

推薦發現**

我的**

後代選擇器( descendant selector )

使用 「 」 隔開兩個選擇器。

例如 :「ul li」表示選擇ul的後代元素li,li可以為ul的直接子元素,也可以為ul的孫子元素。

子代選擇器(child selector)

使用 「>」 隔開兩個選擇器。

例如:"ul>li"表示選擇ul的直接子代元素li,ul的孫子元素li無法被選擇到。

相鄰同胞選擇器(adjacent sibling selector)

使用 「+」 隔開兩個選擇器。

例如:".one+*"表示選擇class為"one"元素的下乙個兄弟元素。

一般同胞選擇器( general sibling selector)

使用 「~」 隔開兩個選擇器。

例如:".one~*"表示選擇class為"one"元素的所有兄弟元素。

演示**:

logo

歡迎您,張三

登出這是乙個網頁

版權資訊

[attr]選擇具有attr屬性的元素、無論該屬性的值為什麼。

[attr=val]選擇具有attr屬性的、並且attr的值為val元素。

[attr~=val]選擇具有attr屬性的、並且attr的值之一為val的元素。

[attr^=val]選擇具有attr屬性的、並且attr的值以val開頭的元素。

[attr$=val]選擇具有attr屬性的、並且attr的值以val結尾的元素。

[attr*=val]選擇具有attr屬性的、並且attr的值包含val的元素。

演示**:

新增刪除

修改搜尋

偽類以":"開頭,用在選擇器後,用於指明元素在某種特殊的狀態下才能被選中。

表示子元素的

:only-child

:first-child

:last-child

:nth-child(n) 、: nth-last-child(n)

:first-of-type、:last-of-type 、

:nth-of-type(n)、:nth-last-of-type(n)

——n可以為元素的序號,也可以為特殊的字元,比如「odd」,「even

元素狀態相關

:hover、 :active、 :focus

:enabled、 :disabled;:checked、 :default

:invalid、 :valid、 :required、 :optional、 :in-range 、:out-of-range

演示**:

小學一年級

1班2班

小學二年級

1班2班

小學三年級

1班2班

偽元素以"::"開頭,用在選擇器後,用於選擇指定的元素。

如:::after

::before

::first-letter

::first-line

::selection

演示**:

hello world

good morming

以上就是在css中常見的選擇器,下面用兩張圖來總結和歸納。css選擇器的分類

css選擇器元素/屬性簡介

以上就是我關於css選擇器的理解與運用,後續有任何補充或修改均會在此基礎上新增,有任何問題歡迎指出,謝謝!

JQuery選擇器之CSS選擇器

語法描述 選擇所有元素 選擇特定型別的元素 選擇具有特定class的元素 選擇具有特定class的某類元素 id 選擇具有特定id屬性值的元素 語法描述 attr 選取定義了attr屬性的元素,即使這個屬性值為空 attr val 選擇attr屬性值等於字串val的元素 attr val 選擇att...

CSS選擇器之基礎選擇器

選擇器 選擇符 就是根據不同需求把不同的標籤選出來這就是選擇器的作用。簡單來說,就是選擇標籤用的。標籤選擇器 又稱元素選擇器,指用html標籤作為選擇器,為頁面中某類標籤設定css樣式。缺點 不能差異化設定樣式,只能選擇全部的當前標籤。語法 基礎選擇器之標籤選擇器title 標籤選擇器 寫上標籤名 ...

CSS 選擇器之基礎選擇器

id選擇器 選擇具體的id屬性值的元素 元素選擇器 選擇具有相同標籤名稱的元素 類選擇器 選擇具有相同的class屬性值的元素。id選擇器,是根據標籤的id屬性值選擇對應的標籤的。格式 id值舉例 定義兩個p標籤,且標籤的id屬性值不同,然後用css定義p標籤的內容如何顯示。google瀏覽器中開啟...