樣式查詢

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

媒體查詢

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

容器查詢

容器查詢

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

容器查詢

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

容器查詢

樣式查詢的一些特性

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

總結(jié)

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