在過去的很長一段時間中，我們都說 css 是不帶有任何邏輯的，意思是在 css 中沒有控制流，也沒有某種類似於其他程式語言的方式來組織 css。css 天生缺乏邏輯性的問題導致了預處理器的出現。然而業界卻對 css 預處理器褒貶不一，支援預處理器的人認為這彌補了 css 缺失的特性；而反對預處理器的人則認為 css 的設計初衷就不應該帶有邏輯性，他們認為根本不應該引入預處理器這個概念。
然而，一種獨特的思考方法最近突然蹦入了我的腦袋。它讓我感到 css 確實擁有邏輯性！很少有人真正那麼想過，這大概也是我們一直認為 css 的邏輯性匱乏的最大原因吧。
我發現我們可以將復合選擇器理解為：主體部分 + 條件部分。首先來看乙個例子：
css code複製內容到剪貼簿
在這個復合選擇器由主體部分是 span，而條件部分是 if (inside .btn) and if (on a) and if (inside .login-box) and if (inside .sidebar) and if (on div)。
也就是說，乙個選擇器的每一部分都是乙個 if 語句，需要在解析選擇器時被滿足（或者不滿足）。有了這種微妙的而又全新的認識，如今我們回頭再看看自己曾經寫出的 css **，我們將會意識到選擇器寫的好或者壞，會對效率產生直接的影響。我們真的會寫出下面這段邏輯嗎？（偽**）：
css code複製內容到剪貼簿
也許不會。這看上去太不直接，也太囉嗦了。我們也許只需要這麼寫：
css code複製內容到剪貼簿
每當為選擇器新增一層限制，其實我們也就是新增了額外的乙個 if 語句。這會導致圈複雜度問題（cyclomatic complexitwww.cppcns.comy)。
圈複雜度
在軟體工程中，圈複雜度是一種程式複雜性的一種度量標準，它一般計算程式中的控制流的數量（如 if, else, while 等）。程式中存在越多的控制流，則圈複雜度就越高。我們自然想要保證圈複雜度能夠盡量地低，因為圈複雜度越高：
**就越難推導
更多潛藏著的、可能會導致失敗的問題
**更難以修改、維護以及復用
你需要考慮更多**執行的結果與其***
編寫測試**的難度也會更高
從圈複雜度的角度來思考 css 的解析過程，我們可以看到瀏覽器在渲染樣式之前需要做許多的決定。我們寫的選擇器中的 if 語句越多，這個選擇器的圈複雜度就越高，這也意味著我們寫的選擇器越糟糕，為了使得這一條選擇器規則滿足，就有需要匹配更多的條件。同時，我們寫的選擇器也會缺乏清晰度和復用性，因為引入了過多不必要的 if 語句會導致不準確的匹配(false positive)。
相比於將 span 巢狀於 .btn 內部並寫一大堆限制條件，更好地做法應該是建立乙個新的類 .btn-text 來描述這個 span。這樣做更加直截了當，同時也更為簡潔和健壯（越多的 @if 語句導致選擇器規則越不容易被滿足）。
值得注意的是瀏覽器解析你寫的選擇器的方式：從右向左。如果你在寫你的選擇器時，第乙個想到的問題是：「這是乙個 span 元素嗎？」 那你通常就會把選擇器寫的過於冗繁。你應該從另乙個角度思考，寫出清晰準確的選擇器規則，徹底摒棄那些冗餘的條件語句。
請不要寫過於寬泛的規則，導致你寫的選擇器在匹配開始時就選中大量的 dom 元素——然後不得不逐步通過更多的條件語句來刪減匹配的物件。從選擇器的規則解析的一開始就匹配盡量少的元素才是一種更棒的方法。
圈複雜度對於 css 來說可能是一種比較高階的原則，但如果我們通過它來考量那些蘊含在我們寫的選擇器中的邏輯性，那我們也許就能寫出更加優秀的**。
一些易於遵守的小規則，
讓你的選擇器最簡化：每一次你想要為選擇器新增規則時，你都在新增額外的 if 語句。將這些 if 語句大聲地讀出來，仔細考慮它們是否有新增的必要。你需要時刻保持你寫的選擇器足夠合理與簡潔。
保證圈複雜度最小化: 使用像 parker 這樣的工具來測試你寫的選擇器的圈複雜度（參考文件：identifiers per selector）
如果你不需要這個檢驗條件，那就不要把它放進選擇器: 有時在 css 中使用巢狀結構是有必要的，可在大多數時候並不是，你甚至不能完全相信inception rule。
從右邊考慮選擇器如何編寫: 從需要匹配的那類元素開始，寫盡量少的額外的 css **來完成一次正確的匹配。
寫選擇器時擁有明確的目的性: 確保你寫的選擇器確實是你想要的，而不是那些碰巧能使得頁面正常顯示的**。
你的選擇器是你的 css 結構最基本的組成部分，程式設計客棧一定要確保你寫的**足夠合理而簡練。
本文標題: 深入理解css中選擇器的邏輯處理
本文位址:
CSS選擇器，深入理解CSS選擇器權重
前端工程師經常和選擇器權重打交道，但是部分人還是一知半解，下面咱們一起學習一下吧。類選擇器 active 標籤選擇器 div 屬性選擇器 img alt 通用選擇器 選擇器權重 這裡的 權 和是數學中加權平均數的 權 乙個意思。當同時多個css選擇器語句的目標是同乙個html元素時，選擇器權重就派上...
css中選擇器
選擇器描述 attribute 用於選取帶有指定屬性的元素。attribute value 用於選取帶有指定屬性和值的元素。attribute value 用於選取屬性值中包含指定詞彙的元素。attribute value 用於選取帶有以指定值開頭的屬性值的元素，該值必須是整個單詞。attribut...
css選擇器優先順序深入理解
一 基礎選擇器 css基礎選擇器有標籤選擇器 類選擇器 id選擇器 通用選擇器 1.標籤選擇器 每個html頁面都由很多個標籤組成，通過標籤選擇器可以對某類標籤應用相應的樣式，chrjslj如對p標籤應用下面的樣式，則頁面中所有的p標籤都會生效 複製 如下 p 2.類選擇器 類選擇器是css非常常用...