樣式查詢

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

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

容器查詢

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

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

樣式查詢的一些特性

• 樣式繼承樣式查詢可以將父級樣式直接應(yīng)用到子級樣式
• 不繼承屬性樣式查詢中，border-color是不繼承的屬性
• 鏈?zhǔn)綐邮綐邮讲樵冎С宙準(zhǔn)?/li>
• 支持變量分組樣式查詢可以通過變量進行分組查詢，比如通過變量判斷設(shè)置暗黑主題
• 支持交互查詢我們可以通過hover等屬性改變樣式，然后通過樣式查詢進行樣式設(shè)置
• 支持組合查詢樣式查詢是可以和容器查詢進行組合的，也就是通過組合進行條件限制

總結(jié)

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