樣式查詢

樣式查詢允許你查詢頁面元素中任何父元素的樣式，并將父元素的樣式應用于子元素。需要說明的是，這是一個實驗性項目，目前還沒有在瀏覽器中正式發布，不過我們可以看下它的具體內容，畢竟未來瀏覽器將會實現它。

媒體查詢

樣式查詢通過在容器查詢中添加style來進行擴展，容器查詢是容器滿足給定大小設置樣式，而樣式查詢則是容器滿足設定樣式而給它設置樣式。

容器查詢

容器查詢

提到樣式查詢，我們就不得不提容器查詢，這也是一個實驗性質的特性，不過目前已經被chrome實現了，你可以把它看做類似媒體查詢的一個性質，不同的是它使用@container 這個屬性，它是根據容器的大小來對元素進行樣式設置的。

容器查詢

可以說容器查詢是css3以來對web樣式的最大改變，它改變了我們對響應式設計的固有看法。

容器查詢

樣式查詢的一些特性

• 樣式繼承 樣式查詢可以將父級樣式直接應用到子級樣式
• 不繼承屬性 樣式查詢中，border-color是不繼承的屬性
• 鏈式樣式 樣式查詢支持鏈式
• 支持變量分組 樣式查詢可以通過變量進行分組查詢，比如通過變量判斷設置暗黑主題
• 支持交互查詢 我們可以通過hover等屬性改變樣式，然后通過樣式查詢進行樣式設置
• 支持組合查詢 樣式查詢是可以和容器查詢進行組合的，也就是通過組合進行條件限制

總結

很多人可能會覺得為什么要開發這么多新特性，原來的css不是用得挺好的嗎？其實不然，技術的發展都是為了解決各種痛點才出現的，如果你是一個新人，比如剛學css的，你沒有歷史包袱的話，你一定會覺得現在的css真的好用，可以做這么多事情，其實這些在以前都是不可想象的，但是技術就是在一次次優化更新中前進的，而作為技術人員，我們能夠做的就是時刻保持學習狀態，與時俱進，不被社會淘汰，不做守舊人，擁抱新天地。?