> Digital anxiety by Jeff Kristiansen

您真正需要了解和理解的9件事

在您的軟體工程職業生涯中，有時會遇到CSS。

從技術上講，它實際上不是語言，而是規則及其結構可能非常複雜。 圍繞清潔CSS進行的討論和社群活動，以及關於清潔程式碼的ter不休。

當開發人員瞭解CSS時，我們通常會學習如何在工作狀態下使用CSS。 這就像弄清楚如何在不真正瞭解JavaScript的情況下使Angular或React應用程式正常工作一樣。

為什麼？

因為大多數時候，它都可以正常工作。

基礎教程通常不會涉及選擇器的工作原理，如果選擇器可以工作，那麼儘管它們是CSS的基礎主題之一，但通常很快就會被淘汰。

或者以大量文字的方式完成。

事不宜遲，這是我對您對CSS選擇器的更深刻理解的貢獻。

選擇器快速短路

選擇器是CSS的一部分，它告訴瀏覽器目的碼的哪一部分。 基本選擇器的目標是HTML標籤，例如h1，p和img標籤。 定位根標記後，您應用的所有樣式都會成為“全域性”樣式的一部分。

這是透過CSS選擇元素的最簡單方法。

許多剛接觸CSS的開發人員往往會做的事情，尤其是當事情進展不順利時，是在CSS檔案中進一步添加了另一個選擇器規則塊。

由於級聯，所寫的內容從上到下依次應用。 這會產生覆蓋效果，因此不建議使用，因為它會建立垃圾程式碼。 這也使跟蹤問題的根本原因變得困難。

編寫CSS規則時，僅在一個地方的特定情況下為特定選擇器提供一個屬性。

這意味著，如果您已經聲明瞭帶有color屬性的p選擇器，則不應稍後在檔案中更改它，除非它處於其他狀態，例如：hover

隨著CSS樣式的增長，這將省去跟蹤選擇器及其屬性的麻煩。

您還可以透過類和id選擇器來定位HTML的特定塊。 如今，ID只能使用一次，並且通常保留給JavaScript掛鉤。 類通常是HTML塊的一種更標準的方法，並且本質上比id更可重用。

類透過HTML中的class屬性宣告，並由CSS使用呼叫。 作為前面的符號。 選擇特定的id是相同的概念，其中id是屬性，而＃是前面的符號。

現在我們已經解決了這個問題，讓我們開始……

相鄰的同級選擇組合

讓我們看一下下面的圖。

通常，大多數地方都是從樣式單一的專案開始的，但是，如果您想建立某種關係，該怎麼辦？

在DOM中，彼此直接相鄰的標記稱為同級。 這意味著h1和p是同級，而h1和ul不是同級。 兄弟姐妹必須彼此相鄰，否則放下h1 + ul將會打擊存在的每個可能的ul，無論其接近程度如何。

使用+號時，可以建立選擇條件。 它告訴您的瀏覽器選擇相鄰的兄弟姐妹，即直接位於另一個指定元素旁邊的元素組合對。

該理論也適用於id和class選擇器。

子組合器選擇的元素是目標元素的直接子元素。 >用來表示這種情況。

讓我們看看如何以圖表形式應用規則。

屬性選擇器

屬性選擇器透過其屬性定位HTML。

HTML屬性僅特定於特定元素，並且使用額外的元資訊來豐富HTML。 它們透過目標元素作為目標，然後是由［］包圍的相關資料

以下是一些透過HTML屬性作為目標的常用且有用的屬性選擇器。

· a ［href * =“ twitter”］ —定位具有href值且包含單詞“ twitter”的元素。

示例： Twitter

· a ［href ^ =“ https：//”］-目標元素的href值以http：//開頭

示例：點綴的松鼠

· a ［href $ =“。co”］ —目標元素的href值以。co結尾

示例：公司與公司

· button ［disabled］-定位已應用了disable屬性的按鈕元素

例如：點選我！

· input ［type =“ submit”］-如果輸入元素具有型別屬性，且其確切值為Submit，則將其定位

偽元素

偽元素將元素之前和之後的“空格”作為目標。 HTML中並不存在實際的空間，但是CSS插入了一個空容器，為您提供了一個可操作的空間。

讓我們看一下CSS以及將內容插入到哪裡。

。item：before { content： “icon。jpg”； }。item：after { content： “anotherIcon。jpg”； }

：before和：after偽元素通常用於顯示特殊的前置專案，例如圖示。 對於偽元素，content屬性是必需的，但可以保留為空白。 它們像其他任何元素一樣對待，可以相應地設定樣式。

這是另外兩個可以與

標記一起使用的偽元素。

以下偽元素需要：：，因為它們僅在某些瀏覽器中起作用，並且需要整個集合才能使其正常工作。 他們只在某些方面起作用，因為目前正在廣泛實施。

基於狀態的偽類

基於狀態的偽類完全針對聽起來像是狀態的目標。 狀態是元素在任何時間點都存在的條件。 例如，：hover是大多數標記中可用的狀態，使您能夠在滑鼠懸停元素時對其進行樣式設定。

這是基於狀態的偽類表

這是您如何編寫CSS的示例。

表單和驗證偽類

形式無處不在。 設定它們的外觀使其可以接受是每個UI開發人員都需要掌握的一項必要技能。特定於表單的偽類使這成為可能。 這是表單和驗證偽類的備忘清單，供您參考，以及它們在視覺定位方面的作用。

將兩個想法放在一起-結構化偽類

還記得本章前面的內容，回到可以使用〜，+和>選擇同級的地方嗎？

好了，您還可以使用結構化偽類來選擇同級和相鄰元素。 這是不同可用結構偽類如何工作的簡要清單。

雜類

像現有的一切一樣，也有一些雜亂無章的人不太適合一個類別。 儘管如此，仍然很高興知道他們的存在。

與：target和#someLinkHere有所不同

在HTML中，您可以連結頁面內的內容而無需重新整理它。 您可以透過和href屬性執行此操作。 當在假定的連結前放置＃時，它將在DOM中查詢相關的ID，並將頁面向下滾動到適當的位置。

程式碼看起來像這樣：

Section OneSection Two… some more code here …some content here………some content here

當您單擊第一部分時，瀏覽器將查詢href部分中設定的相應ID，並將您帶到頁面上的該特定位。 在樣式方面，：target可讓您配置選擇並導航至頁面上目標連結後的視覺效果。

因此，您的CSS可能看起來像這樣：

：target { border：solid 2px black； }

這將導致目標宿主元素（又稱div，基於上面的示例）周圍的邊框。 當您單擊其他目標元素時，樣式將從原來的樣式中刪除，並應用於新的目標。

CSS的有趣方面-第n個子表示式

CSS在表面上看似線性，但可以執行基於條件的選擇。 NTH子表示式是一種實現此目的的方法，而無需開始使用JavaScript或利用您的庫和框架的功能。

以下是一些有用的潛在組合以及如何使用它們。

基本上就是CSS選擇器。 我希望您覺得這篇文章有用，尤其是對將來的參考。

感謝您的閱讀！

（本文翻譯自Aphinya Dechalert的文章《The Ultimate Visual Guide To CSS Selectors》，參考：https：//medium。com/@PurpleGreenLemon/the-ultimate-visual-guide-to-css-selectors-9970ae9103f6）