- 推薦
- 發(fā)現(xiàn)音樂
- 我的音樂
- 下載的音
這是一個(gè)網(wǎng)頁
- one
- two
- three
- four
- five
資訊專欄INFORMATION COLUMN
摘要：相鄰?fù)x擇器使用隔開兩個(gè)選擇器。例如表示選擇為元素的所有兄弟元素。選擇器的分類選擇器元素屬性簡介以上就是我關(guān)于選擇器的理解與運(yùn)用，后續(xù)有任何補(bǔ)充或修改均會(huì)在此基礎(chǔ)上添加，有任何問題歡迎指出，謝謝
CSS選擇器和規(guī)則：
在css聲明塊前添加一個(gè)選擇器，用來指明將css聲明應(yīng)用在哪些元素上。
如圖所示：
標(biāo)簽選擇器又叫元素選擇器，換句話說，文檔的元素就是最基本的選擇器，使用元素名稱直接選中元素即可。
演示代碼：
標(biāo)簽選擇器
你好，標(biāo)簽選擇器！
類選擇器
類選擇以點(diǎn)"."開頭，后面緊跟一個(gè)類名。類名不允許有空格，與元素中class屬性的值保持一致。一個(gè)元素可以有多個(gè)class的值，每個(gè)值通過空格分割開。類名相同的元素屬于一類元素。
演示代碼：
類選擇器
ID選擇器以"#"開頭，后面緊跟一個(gè)ID名，在一個(gè)文檔中，ID值不能重復(fù)，因此在選擇文檔中唯一元素的時(shí)候該選擇器比較有用。
演示代碼：
ID選擇器
— "Good morning."
— "Go away!"
普遍選擇器
使用"*”來表示普遍選擇器，表示選擇所有元素，通常用在組合選擇器中。
演示代碼：
普遍選擇器
- 推薦
- 發(fā)現(xiàn)音樂
- 我的音樂
- 下載的音
層次選擇器
后代選擇器（ descendant selector ）
使用 “ ” 隔開兩個(gè)選擇器。
例如 ：“ul li”表示選擇ul的后代元素li，li可以為ul的直接子元素，也可以為ul的孫子元素。
子代選擇器（child selector）
使用 “>” 隔開兩個(gè)選擇器。
例如："ul>li"表示選擇ul的直接子代元素li,ul的孫子元素li無法被選擇到。
相鄰?fù)x擇器（adjacent sibling selector）
使用 “+” 隔開兩個(gè)選擇器。
例如：".one+*"表示選擇class為"one"元素的下一個(gè)兄弟元素。
一般同胞選擇器（ general sibling selector）
使用 “~” 隔開兩個(gè)選擇器。
例如：".one~*"表示選擇class為"one"元素的所有兄弟元素。
演示代碼：
層次選擇器
屬性選擇器
[attr] 選擇具有attr屬性的元素、無論該屬性的值為什么。
[attr=val] 選擇具有attr屬性的、并且attr的值為val元素。
[attr~=val] 選擇具有attr屬性的、并且attr的值之一為val的元素。
[attr^=val] 選擇具有attr屬性的、并且attr的值以val開頭的元素。
[attr$=val] 選擇具有attr屬性的、并且attr的值以val結(jié)尾的元素。
[attr*=val] 選擇具有attr屬性的、并且attr的值包含val的元素。
演示代碼：
屬性選擇器
偽類選擇器
偽類以":"開頭，用在選擇器后，用于指明元素在某種特殊的狀態(tài)下才能被選中。
表示子元素的
: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可以為元素的序號(hào)，也可以為特殊的字符，比如“odd”，“even
元素狀態(tài)相關(guān)
:hover、 :active、 :focus
:enabled、 :disabled；:checked、 :default
:invalid、 :valid、 :required、 :optional、 :in-range 、:out-of-range
演示代碼：
偽類選擇器
偽元素以"::"開頭，用在選擇器后，用于選擇指定的元素。
如：
::after
::before
::first-letter
::first-line
::selection
演示代碼：
偽元素選擇器
hello world
good morming
以上就是在CSS中常見的選擇器，下面用兩張圖來總結(jié)和歸納。
CSS選擇器的分類
CSS選擇器元素/屬性簡介
以上就是我關(guān)于CSS選擇器的理解與運(yùn)用，后續(xù)有任何補(bǔ)充或修改均會(huì)在此基礎(chǔ)上添加，有任何問題歡迎指出，謝謝！
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/115882.html
摘要：如果頁面上的鏈接很多或者對跳轉(zhuǎn)頁面的協(xié)議有要求，使用屬性選擇器配合偽元素對鏈接的協(xié)議進(jìn)行提示也不失為一種好方法。 CSS 屬性選擇器，可以通過已經(jīng)存在的屬性名或?qū)傩灾灯ヅ湓亍?屬性選擇器是在 CSS2 中引入的并且在 CSS3 中得到了很好拓展。本文將會(huì)比較全面的介紹屬性選擇器，盡可能的去挖掘這個(gè)選擇器在不同場景下的不同用法。 簡單的語法介紹 [attr]：該選擇器選擇包含 att...
摘要：最基本的選擇器是元素選擇器比如選擇器比如還有類選擇器比如。選擇器和類選擇器在速度上的差異基本上沒有關(guān)系?，F(xiàn)在我們回到討論開始的地方，哪類選擇器是最高效的哪個(gè)是會(huì)影響選擇器效率的關(guān)鍵選擇器寫代碼的時(shí)候，關(guān)鍵選擇器是能否高效的決定因素。 高效的CSS已經(jīng)不是一個(gè)新的話題了，也不是我一個(gè)非得重拾的話題，但它卻是我在工作之時(shí)，所感興趣的，關(guān)注已久的話題。 有很多人都忘記了，或在簡單的說沒有意識(shí)...
摘要：最基本的選擇器是元素選擇器比如選擇器比如還有類選擇器比如。選擇器和類選擇器在速度上的差異基本上沒有關(guān)系?，F(xiàn)在我們回到討論開始的地方，哪類選擇器是最高效的哪個(gè)是會(huì)影響選擇器效率的關(guān)鍵選擇器寫代碼的時(shí)候，關(guān)鍵選擇器是能否高效的決定因素。 高效的CSS已經(jīng)不是一個(gè)新的話題了，也不是我一個(gè)非得重拾的話題，但它卻是我在工作之時(shí)，所感興趣的，關(guān)注已久的話題。 有很多人都忘記了，或在簡單的說沒有意識(shí)...
摘要：一前言在中使用，包括內(nèi)聯(lián)式內(nèi)嵌式鏈接式和導(dǎo)入式。鏈接式使用時(shí)需要在標(biāo)記中使用標(biāo)記，通過標(biāo)記的相關(guān)屬性指明外部文件的路徑，以方便找到其中定義的樣式并運(yùn)用在當(dāng)前網(wǎng)頁元素上。導(dǎo)入式通過在標(biāo)記的標(biāo)記中使用方法導(dǎo)入相應(yīng)的文件。 一、前言 在 HTML 中使用 CSS，包括內(nèi)聯(lián)式、內(nèi)嵌式、鏈接式和導(dǎo)入式。 二、分類 2.1 內(nèi)聯(lián)式 內(nèi)聯(lián)式是所有樣式應(yīng)用方式中最為直接的一種，它通過對 HTML 標(biāo)記...
摘要：一前言在中使用，包括內(nèi)聯(lián)式內(nèi)嵌式鏈接式和導(dǎo)入式。鏈接式使用時(shí)需要在標(biāo)記中使用標(biāo)記，通過標(biāo)記的相關(guān)屬性指明外部文件的路徑，以方便找到其中定義的樣式并運(yùn)用在當(dāng)前網(wǎng)頁元素上。導(dǎo)入式通過在標(biāo)記的標(biāo)記中使用方法導(dǎo)入相應(yīng)的文件。 一、前言 在 HTML 中使用 CSS，包括內(nèi)聯(lián)式、內(nèi)嵌式、鏈接式和導(dǎo)入式。 二、分類 2.1 內(nèi)聯(lián)式 內(nèi)聯(lián)式是所有樣式應(yīng)用方式中最為直接的一種，它通過對 HTML 標(biāo)記...
閱讀 3549·2023-04-25 17:35
閱讀 2620·2021-11-24 09:39
閱讀 2557·2021-10-18 13:32
閱讀 3444·2021-10-11 10:58
閱讀 1665·2021-09-26 09:55
閱讀 6241·2021-09-22 15:47
閱讀 995·2021-08-26 14:15
閱讀 3496·2019-08-30 15:55
