突破css選擇器的局限，實現一個css地址選擇器?

warnerwu 發布于2019-08-02 11:56 / 3424人閱讀

摘要：后代選擇器，可以選擇子元素，卻沒法選擇父元素。這里說的有關聯指的是相近或者相反，比如子選擇器和后代選擇器就是比較相近的如果要實現鼠標相關的功能，可能就會聯想到等選擇器。

首先看一個效果，注意地址欄的變化

然后思考一下，用css如何實現？

css選擇器的局限

選擇器是css中的一大特色，用于選擇需要添加樣式的元素。

選擇器的種類有很多，比如

元素選擇器

p {color:gray;}

類選擇器

.box {color:gray;}

ID選擇器

#title {color:gray;}

屬性選擇器

[title] {color:gray;}

后代選擇器

h1 span {color:gray;}

相鄰兄弟選擇器

h1 + p {margin-top:50px;}

這里只列舉了幾種，還有很多，不熟悉的可以自行搜索查找。

雖然說css選擇器有很多種，可以滿足絕大部分的需求，不過有時候還是會有一些看似合理，實際上比較棘手的問題。

比如說上面提到了相鄰兄弟選擇器，不過只能選擇后面的兄弟節點，卻不能選擇前面的。

后代選擇器，可以選擇子元素，卻沒法選擇父元素。

用另一種思維來突破局限

上面列出了兩個我們常見的需求，然而css卻不支持，如何解決呢？

不要在這里提js，這完全是兩種不同的思維領域

這里以實現前置兄弟選擇器為例

尋找關聯

首先，我們需要找到和需求有關聯的選擇器，畢竟要以已有的選擇器為基礎。

這里說的有關聯指的是相近或者相反，比如子選擇器p>span和后代選擇器p span就是比較相近的

如果要實現鼠標相關的功能，可能就會聯想到:hover、:active等選擇器。

這里要實現前置兄弟選擇器很顯然需要聯系上已有的相鄰兄弟選擇器+和后置選擇器~，都屬于兄弟節點。

解決思路

其實有一種方式是很常見的。

比如有這樣一個布局，我希望span前面的a（也就是標簽1和標簽2）為紅色字體


  標簽1
  標簽2
  說明
  標簽3
  標簽4

我們用到了后置選擇器~，其實這里上述規定的位置關系都是以html文檔中的位置為準的。

我們可以手動把這些位置顛倒一下


  標簽4
  標簽3
  說明
  標簽2
  標簽1

然后我們可以采取很多種方式，讓頁面的順序恢復過來。

比如

a,span{
  float:right
}

這樣在頁面上看到的順序還是和之前一樣，分別是標簽1、標簽2、說明、標簽3、標簽4

然后就可以直接使用后置選擇器~

span ~ a{
  color:red
}

這樣是不是就做出了在視覺上前置選擇器的效果？不過需要提前把html里面的結構反過來，通過一些樣式看著順序是正常的即可。

還有一個思路，可以稱為逆向思維吧

布局和之前一樣


  標簽1
  標簽2
  說明
  標簽3
  標簽4

我們可以這樣來實現，先把所有的a都設置為紅色，然后把span后面的a還原，不就達到目的了嗎？

div a{
  color:red;
}
span ~ a{
  color:unset;
}

同樣也實現了這樣的目的。

當然這只是兩個很簡單的例子，詳細的實例可以參考我之前寫過的文章，更接近實際的需求

用純css實現打星星效果

用純css實現打星星效果（二）

css地址選擇器?

這里可以明確的說明，css是沒有關于地址的選擇器的。

這里說的地址是指瀏覽器的地址欄，比如

http://test.com/a

http://test.com/b

或者

http://test.com#a

http://test.com#b

有人可能覺得這是個偽需求，我的地址都變了，都不是同一個頁面了，我在不同的頁面分別寫不同的css不就行了？

這個思路再有些情況是是對的，有些情況下有的問題

比如從http://test.com#a到http://test.com#b這種情況下，一般都還是同一個頁面

并且，現在很多單頁面應用地址欄的改變并沒有引起瀏覽器頁面的刷新，地址的更變完全就是前端路由實現的，比如說我的博客

一個需求

其實我最早想到要這種選擇器的時候，是做主題選擇的功能。

比如http://test.com和http://test.com#light表示正常主題，http://test.com#dark表示黑色主題。

這樣做的一個好處就是可以很直觀的從地址欄看出主題配色，比如可以直接以http://test.com#dark進入黑色主題。

類似的想法就是

下面是偽代碼

#light div{
  background:#fff;
  color:#000;
}
#dark div{
  background:#000;
  color:#fff;
}

當然現在跟地址欄半毛錢的關系都沒有。

那么，這樣實現一個地址選擇器?

思路

按照上面的思路，我們先考慮跟地址有關聯的選擇器，乍一看，確實找不到一個合適的

后來突然發現了:target選擇器，這個是用來選擇當前活動的 HTML 錨點的。

官方的示例也都很簡單，簡單來講就是如果當前地址欄為#new，那么文檔中id為new的元素就會被選中

下面是w3school的示例

http://www.w3school.com.cn/tiy/t.asp?f=css_sel_target

實現

那么怎樣實現我們需要的功能呢？

這里有一個簡單的布局


  演示

如果想實現http://test.com#dark的功能，那么文檔中就應該有個id為dark的元素可以選擇到


  演示

加上id后，就可以實現類似的功能了

/**正常主題**/
p{
  background:#fff;
  color:#000;
}
/**黑色主題**/
#dark:target p{
  background:#000;
  color:#fff;
}

這么容易？

上面固定了一個，如果有多個，比如紅色主題，綠色主題，黃色主題...不可能全都寫在一個div上吧



  演示

這里就要區分開來了，我們需要在額外的地方來添加一些id，比如在頁面的最上面





  演示

然后結合兄弟選擇器就可以實現如下效果

#red:target ~ div p{
  background:red;
}
#green:target ~ div p{
  background:green;
}
#blue:target ~ div p{
  background:blue;
}

這里是demo

效果如文章開頭所示。

這里直接做了切換，源碼可以右鍵直接查看

很簡潔不是嗎，也不需要本地存儲，直接根據地址欄來決定主題配色。

小節

以上主要講解了css的一些局限性，但是css足夠靈活，有些地方可能是設計時候的缺陷，不可避免，但是完全可以通過其靈活性達到我們想要的效果

更先進的css4也將會到來，更多有趣的事情等著我們來發掘

插一句

還有一個更為強大的適用場景，就是多語言的適配，可以根據地址欄直接決定頁面的語言

#zn:target{
  /* 一些邏輯 */
}

#en:target{
  /* 一些邏輯 */
}

#jp:target{
  /* 一些邏輯 */
}

這個后面會專門有一篇文章來講解，敬請期待

如果喜歡我的博客，可以多多關注一下，謝謝 ~

云服務器 GPU云服務器 css選擇器基礎選擇器css css選擇 js做地址選擇器

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/53229.html

突破css選擇器的局限，實現一個css地址選擇器?

摘要：后代選擇器，可以選擇子元素，卻沒法選擇父元素。這里說的有關聯指的是相近或者相反，比如子選擇器和后代選擇器就是比較相近的如果要實現鼠標相關的功能，可能就會聯想到等選擇器。首先看一個效果，注意地址欄的變化 showImg(https://segmentfault.com/img/remote/1460000016937042?w=1058&h=433); 然后思考一下，用css如何實現？...

afishhhhh 2019-08-29 17:12 評論0 收藏0
淺談網頁基本性能優化規則小結

摘要：雪碧圖內聯圖片將站內小圖標合并成一張圖，使用定位截取對應圖標適當使用內聯圖片。瀏覽器緩存合理設置瀏覽器緩存是網頁優化的重要手段之一。為什么要減少請求在性能優化中減少請求的措施占了很大部分，比如使用雪碧這篇文章主要介紹了淺談網頁基本性能優化規則小結的相關資料，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧針對瀏覽器網頁的一些優化規則頁面優化靜態資源壓縮...

Aomine 2019-08-23 13:51 評論0 收藏0
淺談網頁基本性能優化規則小結

摘要：雪碧圖內聯圖片將站內小圖標合并成一張圖，使用定位截取對應圖標適當使用內聯圖片。瀏覽器緩存合理設置瀏覽器緩存是網頁優化的重要手段之一。為什么要減少請求在性能優化中減少請求的措施占了很大部分，比如使用雪碧這篇文章主要介紹了淺談網頁基本性能優化規則小結的相關資料，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧針對瀏覽器網頁的一些優化規則頁面優化靜態資源壓縮...

luffyZh 2019-06-28 16:52 評論0 收藏0
淺談網頁基本性能優化規則小結

摘要：雪碧圖內聯圖片將站內小圖標合并成一張圖，使用定位截取對應圖標適當使用內聯圖片。瀏覽器緩存合理設置瀏覽器緩存是網頁優化的重要手段之一。為什么要減少請求在性能優化中減少請求的措施占了很大部分，比如使用雪碧這篇文章主要介紹了淺談網頁基本性能優化規則小結的相關資料，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧針對瀏覽器網頁的一些優化規則頁面優化靜態資源壓縮...

CoderStudy 2019-07-30 18:37 評論0 收藏0