- 推薦
- 發現音樂
- 我的音樂
- 下載的音
這是一個網頁
- one
- two
- three
- four
- five
資訊專欄INFORMATION COLUMN
摘要：相鄰同胞選擇器使用隔開兩個選擇器。例如表示選擇為元素的所有兄弟元素。選擇器的分類選擇器元素屬性簡介以上就是我關于選擇器的理解與運用，后續有任何補充或修改均會在此基礎上添加，有任何問題歡迎指出，謝謝
CSS選擇器和規則：
在css聲明塊前添加一個選擇器，用來指明將css聲明應用在哪些元素上。
如圖所示：
標簽選擇器又叫元素選擇器，換句話說，文檔的元素就是最基本的選擇器，使用元素名稱直接選中元素即可。
演示代碼：
標簽選擇器
你好，標簽選擇器！
類選擇器
類選擇以點"."開頭，后面緊跟一個類名。類名不允許有空格，與元素中class屬性的值保持一致。一個元素可以有多個class的值，每個值通過空格分割開。類名相同的元素屬于一類元素。
演示代碼：
類選擇器
ID選擇器以"#"開頭，后面緊跟一個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"元素的所有兄弟元素。
演示代碼：
層次選擇器
屬性選擇器
[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
演示代碼：
偽類選擇器
偽元素以"::"開頭，用在選擇器后，用于選擇指定的元素。
如：
::after
::before
::first-letter
::first-line
::selection
演示代碼：
偽元素選擇器
hello world
good morming
以上就是在CSS中常見的選擇器，下面用兩張圖來總結和歸納。
CSS選擇器的分類
CSS選擇器元素/屬性簡介
以上就是我關于CSS選擇器的理解與運用，后續有任何補充或修改均會在此基礎上添加，有任何問題歡迎指出，謝謝！
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/115882.html
摘要：如果頁面上的鏈接很多或者對跳轉頁面的協議有要求，使用屬性選擇器配合偽元素對鏈接的協議進行提示也不失為一種好方法。 CSS 屬性選擇器，可以通過已經存在的屬性名或屬性值匹配元素。 屬性選擇器是在 CSS2 中引入的并且在 CSS3 中得到了很好拓展。本文將會比較全面的介紹屬性選擇器，盡可能的去挖掘這個選擇器在不同場景下的不同用法。 簡單的語法介紹 [attr]：該選擇器選擇包含 att...
摘要：最基本的選擇器是元素選擇器比如選擇器比如還有類選擇器比如。選擇器和類選擇器在速度上的差異基本上沒有關系?，F在我們回到討論開始的地方，哪類選擇器是最高效的哪個是會影響選擇器效率的關鍵選擇器寫代碼的時候，關鍵選擇器是能否高效的決定因素。 高效的CSS已經不是一個新的話題了，也不是我一個非得重拾的話題，但它卻是我在工作之時，所感興趣的，關注已久的話題。 有很多人都忘記了，或在簡單的說沒有意識...
摘要：最基本的選擇器是元素選擇器比如選擇器比如還有類選擇器比如。選擇器和類選擇器在速度上的差異基本上沒有關系?，F在我們回到討論開始的地方，哪類選擇器是最高效的哪個是會影響選擇器效率的關鍵選擇器寫代碼的時候，關鍵選擇器是能否高效的決定因素。 高效的CSS已經不是一個新的話題了，也不是我一個非得重拾的話題，但它卻是我在工作之時，所感興趣的，關注已久的話題。 有很多人都忘記了，或在簡單的說沒有意識...
摘要：一前言在中使用，包括內聯式內嵌式鏈接式和導入式。鏈接式使用時需要在標記中使用標記，通過標記的相關屬性指明外部文件的路徑，以方便找到其中定義的樣式并運用在當前網頁元素上。導入式通過在標記的標記中使用方法導入相應的文件。 一、前言 在 HTML 中使用 CSS，包括內聯式、內嵌式、鏈接式和導入式。 二、分類 2.1 內聯式 內聯式是所有樣式應用方式中最為直接的一種，它通過對 HTML 標記...
摘要：一前言在中使用，包括內聯式內嵌式鏈接式和導入式。鏈接式使用時需要在標記中使用標記，通過標記的相關屬性指明外部文件的路徑，以方便找到其中定義的樣式并運用在當前網頁元素上。導入式通過在標記的標記中使用方法導入相應的文件。 一、前言 在 HTML 中使用 CSS，包括內聯式、內嵌式、鏈接式和導入式。 二、分類 2.1 內聯式 內聯式是所有樣式應用方式中最為直接的一種，它通過對 HTML 標記...
閱讀 3514·2023-04-25 17:35
閱讀 2588·2021-11-24 09:39
閱讀 2525·2021-10-18 13:32
閱讀 3409·2021-10-11 10:58
閱讀 1630·2021-09-26 09:55
閱讀 6134·2021-09-22 15:47
閱讀 959·2021-08-26 14:15
閱讀 3466·2019-08-30 15:55
