紅魔電競平板評測：大屏幕硬實力
前言：三年的疫情因為要上網課的原因激活了平板市場，如今網課的時代已經過去，大家的生活都恢復到了正軌，這也就意味著，真正考驗平板電腦生存的環境來了。也就是面對著這種殘酷的
最近，在和前端小伙伴聊天中發現，有些同學對css有一種望而卻步的趕腳。究其原因，就是因為它的各種屬性繁雜多樣，屬性的用法千奇百怪。大家想做系統學習也找不到對應的方法，只是「機械式」的進行記憶。而沒有在腦海中形成對應的「畫面」。
想必大家在平時業務開發中，對某個css屬性進行查詢時，總是打開google然后輸入對應的屬性，一般都是返回MDN中相關介紹。但是，它們這種介紹都是從原理角度來分析，無法給人一種直觀的感受。
所以，既要想系統性的學習并且有一個直觀印象，最好的方式就是用圖例的方式來「可視化」記憶和總結。
而今天，我們來系統的介紹一下CSS選擇器。這塊沒啥原理可講，我們只是需要記憶即可，所以這篇文章算是給我或者大家的一篇備忘錄。以便以后能夠快速查詢。
CSS選擇器是用于選擇 HTML 元素并為其應用樣式的一種機制。
以下是一些常見的 CSS 選擇器及其用途：
第一個選擇器表示父元素
第二個選擇器表示后代元素
例如，div p 選擇所有 <div> 元素內部的所有段落 <p> 元素。
第一個選擇器表示第一個元素
第二個選擇器表示其緊鄰的兄弟元素
例如，h2 + p 選擇所有緊接在 <h2> 元素后面的 <p> 元素。
「通用選擇器（Universal Selector）」：選擇頁面中的「所有元素」。使用星號（*）表示。例如，* 選擇頁面中的所有元素。
除了這些基本的選擇器外，CSS 還提供了許多其他類型的選擇器，如偽類選擇器（例如 :hover、:active）、偽元素選擇器（例如 ::before、::after）、屬性選擇器（例如 [type="text"]）等，可以根據具體的需求選擇合適的選擇器來對頁面元素進行樣式化。
CSS的通用選擇器是一個星號（*），它匹配文檔中的「任何元素」。使用通用選擇器，我們可以選擇頁面上的「所有元素」，并為它們應用相同的樣式。
例如，如果我們想為頁面上的所有元素設置相同的字體樣式，我們可以使用通用選擇器來實現。
但要注意，過度使用通用選擇器可能會導致「性能問題」，因為它會匹配頁面上的所有元素，包括嵌套元素，這可能會增加瀏覽器的渲染負擔。因此，建議在必要時謹慎使用通用選擇器。
圖片
元素選擇器是 CSS 中最簡單的選擇器之一，它通過指定 HTML 元素的名稱來選擇元素。例如，要選擇所有段落元素 <p>，我們可以使用以下選擇器：
p { /* CSS 樣式 */}這將選擇頁面中的所有段落元素，并應用所指定的 CSS 樣式。
圖片
類選擇器用于選擇具有特定類名的 HTML 元素。類選擇器以點號（.）開頭，后跟類名。例如，如果我們有一個類名為 button 的按鈕元素，我們可以使用類選擇器來選擇它：
.button { /* CSS 樣式 */}這將選擇頁面中所有具有類名 button 的元素，并應用所指定的 CSS 樣式。類選擇器使我們可以為頁面中的「多個元素定義相同的樣式」，而不必重復定義。此外，一個元素可以同時具有多個類，這樣就可以輕松地將多個樣式應用于同一個元素。
圖片
ID 選擇器是 CSS 中用于選擇具有特定 ID 屬性的 HTML 元素的選擇器。ID 選擇器以井號（#）開頭，后跟 ID 名稱。
例如，如果我們有一個 ID 為 my-id 的標題元素，我們可以使用 ID 選擇器來選擇它：
#my-id { /* CSS 樣式 */}這將選擇頁面中具有 ID 名稱為 my-id 的元素，并應用所指定的 CSS 樣式?！概c類選擇器不同，ID 選擇器應該是唯一的」，因為 HTML 頁面中每個元素的 ID 必須是唯一的。ID 選擇器通常用于「為特定元素應用唯一的樣式」。
圖片
.class.class-2表示連接兩個或更多類或ID來選擇具有所有指定類/ID的元素：
圖片
這段CSS代碼的意思是選擇具有 .my-class 和 .special 兩個類的元素，并設置對應的背景色。
使用逗號分隔多個選擇器聲明。這樣可以輕松地「將相同的樣式應用于多個選擇器聲明」:
圖片
后代選擇器用于「選擇特定元素的后代元素」。后代選擇器使用「空格分隔兩個選擇器」，其中
例如，如果我們想選擇所有 <div> 元素內部的所有段落 <p>，我們可以使用后代選擇器：
div p { /* CSS 樣式 */}這將選擇所有在 <div> 元素內部的 <p> 元素，并應用所指定的 CSS 樣式。后代選擇器允許我們更精確地定位特定元素，而不受頁面結構的限制。
圖片
相鄰兄弟選擇器它用于選擇「緊接」在另一個元素后面的元素。相鄰兄弟選擇器使用加號（+）符號來連接兩個選擇器，其中
例如，如果我們想選擇所有緊跟在 <h2> 元素后面的段落 <p> 元素，我們可以使用相鄰兄弟選擇器：
h2 + p { /* CSS 樣式 */}這將選擇緊接在 <h2> 元素后面的 <p> 元素，并應用所指定的 CSS 樣式。相鄰兄弟選擇器允許我們「根據元素之間的特定關系來選擇元素」，從而使得樣式的應用更加精確和有針對性。
圖片
子選擇器用于選擇特定元素的「直接子元素」。子選擇器使用大于號（>）符號來連接兩個選擇器，其中
例如，如果我們想選擇所有 <ul> 元素下的直接子元素 <li>，我們可以使用子選擇器：
ul > li { /* CSS 樣式 */}這將選擇所有直接位于 <ul> 元素內部的 <li> 元素，并應用所指定的 CSS 樣式。
子選擇器「只會選擇指定元素的直接子元素，而不會選擇嵌套在更深層次的子元素」。這使得子選擇器非常有用，因為它可以幫助我們更精確地定位特定層次結構的元素，并應用相應的樣式。
圖片
兄弟選擇器用于「選擇與指定元素具有相同父元素且位于其后面的所有兄弟元素」。一般兄弟選擇器使用波浪號（~）符號來連接兩個選擇器，其中
例如，如果我們想選擇所有與 <h2> 元素具有相同父元素且位于其后面的 <p> 元素，我們可以使用一般兄弟選擇器：
h2 ~ p { /* CSS 樣式 */}這將選擇所有與 <h2> 元素具有相同父元素且位于其后面的 <p> 元素，并應用所指定的 CSS 樣式。
兄弟選擇器允許我們選擇與指定元素具有相同父元素且位于其后面的所有兄弟元素，而不僅僅是直接的兄弟元素。
圖片
腦殘貓頭鷹選擇器用來描述一種特定的 CSS 模式。它涉及選擇多個元素并為它們應用共享樣式，從而在網頁的各個組件或部分中創建一致的視覺設計。
術語腦殘指的是通用選擇器（*）與相鄰兄弟選擇器（+）結合使用的情況。貓頭鷹可能指的是 CSS 選擇器的形態類似于貓頭鷹的頭部和眼睛。
以下是“腦殘貓頭鷹”選擇器模式的示例：
* + * { margin-top: 1.5em;}這個 CSS 規則選擇了在另一個元素之后出現的任何元素（除了容器中的第一個元素），并在頂部應用了一定的邊距，有效地使元素均勻地間隔開來。這種模式特別適用于在為「容器內的元素添加間距，但第一個元素沒有前置兄弟元素」。當然，我們也可以使用 :not(:first-child)來達到相同的效果。
圖片
屬性選擇器它允許我們根據元素的屬性及其屬性值來選擇元素，并為其應用樣式。屬性選擇器使用方括號（[]）表示，內部包含屬性名和可選的屬性值。
選擇具有指定屬性的元素，不論其屬性值是什么。
[data-text] { /* CSS 樣式 */}選擇所有具有 data-text 屬性的元素，并為其應用樣式。這個選擇器「不關心屬性的值是什么，只要有這個屬性就會被選中」
圖片
選擇具有指定屬性和特定值的元素。
[data-text="hello"] { /* CSS 樣式 */}選擇所有 data-text 屬性的值為 hello 的元素，并為其應用樣式。
只有屬性值為 hello 的元素才會被選中。
選擇具有指定屬性，并且屬性值包含特定值的元素。
[title*="saur"] { /* CSS 樣式 */}選擇所有 title 屬性值中包含 saur子字符串的元素，并為其應用樣式。
只要屬性值包含 saur，無論是在開頭、中間還是結尾，都會被選中。
圖片
選擇具有指定屬性，且屬性值以特定值開頭的元素。
a[href^="https://"] { /* CSS 樣式 */}選擇所有 href 屬性值以 https:// 開頭的 <a> 元素，并為其應用樣式。
只有鏈接以 https:// 開頭的 <a> 元素才會被選中。
圖片
選擇具有指定屬性，且屬性值以特定值結尾的元素。
[src$=".png"] { /* CSS 樣式 */}選擇所有 src 屬性值以 .png 結尾的元素，并為其應用樣式。
只有圖片路徑以 .png 結尾的元素才會被選中。
圖片
選擇具有指定屬性，且屬性值包含特定值的元素，且值之間以空格分隔。
[class~="active"] { /* CSS 樣式 */}選擇所有具有包含 active 的類名的元素，并為其應用樣式。
這個選擇器將選中所有具有 active 類的元素，無論它們的類名是 active 還是 some-active-class 等。
圖片
以下四個偽類用于選擇各種狀態下的link等元素。這四個偽類通常與鏈接一起使用，但是 :active 對于button也很有用，而 :hover 可以用于所有類型的元素：
選擇未訪問的link。它允許我們為用戶尚未點擊的超鏈接設置樣式。
選擇用戶已經訪問過的link。這個偽類允許我們為以前點擊過的超鏈接應用樣式。
:hover
當用戶的指針（例如鼠標光標）懸停在元素（通常是鏈接）上時，選擇這些元素。
:active
選擇在它們被激活時的元素（通常是鏈接或按鈕），例如當用戶點擊它們時。
在前端項目中，input有很大的用處。我們來看MDN關于input的介紹。
所以，和input相關的選擇器也很多。
:checked 偽類選擇器用于選擇當前被選中/勾選的單選按鈕、復選框或選擇元素中的選項。
input[type='checkbox'] { all: unset; -webkit-appearance: none; appearance: none; margin: 0;}input[type='checkbox']:checked + label { background: mediumseagreen;}input[type='checkbox']:focus + label { box-shadow: 0 0 0 2px yellow;}在上面的示例中，我使用 appearance: none 來移除復選框輸入框的默認樣式
:disabled 偽類匹配「禁用」的表單元素，例如button或input
:enabled 偽類匹配可以交互并接收輸入的表單元素
:valid 偽類用于定位具有內容符合其屬性規定要求（如 pattern、type 等）的輸入元素：
:invalid 偽類用于定位內容不符合要求的輸入元素：
:required 偽類用于定位具有 required 屬性的輸入元素，表明在提交表單之前必須填寫它們：
:optional 偽類用于定位沒有 required 屬性的輸入元素，表示它們不是必填項：
:first-child 偽類用于定位其「父元素內的第一個子元素」：
:last-child 偽類用于定位其父元素內的最后一個子元素：
:nth-child 偽類根據元素在其父元素中的位置進行選擇，允許進行各種各樣的選擇。
:nth-child 還可以讓我們按模式選擇元素：
公式中的 n 就像一個計數器，讓我們可以在重復循環中選擇元素。
:nth-last-child 偽類類似于 :nth-child，但它是從「最后一個子元素開始向后計數」的
如果某個元素是其父元素的「唯一子元素」，則 :only-child 偽類將其作為目標元素：
:first-of-type 偽類的目標是其父級中「該類型的第一個元素」：
:last-of-type 偽類的目標是其父級中「該類型的最后一個元素」
:nth-of-type 偽類根據元素的類型和兄弟元素中的位置來匹配元素
:nth-last-of-type 偽類根據元素的類型和兄弟元素中的位置來匹配元素，但從末尾開始計數
:only-of-type 偽類的目標元素是其兄弟元素中該類型的唯一元素：
:target 偽類選擇具有與 URL 片段匹配的 ID 屬性的元素（例如：https://example.com/#fragment）。:target 經常用于為直接鏈接到的頁面部分設置樣式，通常「與頁面內鏈接一起使用」。
:not()函數偽類允許我們定位與指定選擇器或條件不匹配的元素。它本質上是一個「過濾器」：
:has()函數偽類允許在元素包含某個元素或另一個選擇器時對其進行樣式設置：
::before 偽元素用于在元素內容之前插入內容。它可用于添加裝飾內容、圖標或其他不需要在實際 DOM 中的元素：
::after 偽元素與 ::before 類似，用于在元素內容之后插入內容：
::first-letter 偽元素用于設置塊級元素的「第一個字母的樣式」，允許使用首字下沉等設計元素：
::first-line 偽元素用于設置塊級元素第一行的樣式。這允許印刷效果可以根據包含元素的大小和字體大小動態調整：
::placeholder 偽元素用于設置表單字段（如 <input> 和 <textarea>）的占位符文本的樣式：
::selection 偽元素用于設置元素中已突出顯示或由用戶選擇的部分的樣式。例如，當用戶單擊并拖動以選擇文本時，::selection偽元素可用于修改該選擇的背景顏色、文本顏色和其他樣式：
::marker 偽元素用于設置列表項中標記框的樣式，列表項通常包含項目符號（對于無序列表）或數字/字母（對于有序列表）。
在引入 ::marker 偽元素之前，自定義這些標記通常需要解決方法，但這個偽元素給了我們更多的控制權：
本文鏈接：http://www.www897cc.com/showinfo-26-79598-0.html你的Css選擇器可視化備忘錄
聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。郵件：2376512515@qq.com
Copyright ? 2016-2023 天津谷騏科技有限公司 版權所有 sitemap.xml
違法及侵權請聯系：2376512515@qq.com 津ICP備18001702號
津公網安備 12010102000574號