突破css選擇器的局限，實(shí)現(xiàn)一個css地址選擇器?

warnerwu 發(fā)布于2019-08-02 11:56 / 3474人閱讀

摘要：后代選擇器，可以選擇子元素，卻沒法選擇父元素。這里說的有關(guān)聯(lián)指的是相近或者相反，比如子選擇器和后代選擇器就是比較相近的如果要實(shí)現(xiàn)鼠標(biāo)相關(guān)的功能，可能就會聯(lián)想到等選擇器。

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

然后思考一下，用css如何實(shí)現(xiàn)？

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選擇器有很多種，可以滿足絕大部分的需求，不過有時候還是會有一些看似合理，實(shí)際上比較棘手的問題。

比如說上面提到了相鄰兄弟選擇器，不過只能選擇后面的兄弟節(jié)點(diǎn)，卻不能選擇前面的。

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

用另一種思維來突破局限

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

不要在這里提js，這完全是兩種不同的思維領(lǐng)域

這里以實(shí)現(xiàn)前置兄弟選擇器為例

尋找關(guān)聯(lián)

首先，我們需要找到和需求有關(guān)聯(lián)的選擇器，畢竟要以已有的選擇器為基礎(chǔ)。

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

如果要實(shí)現(xiàn)鼠標(biāo)相關(guān)的功能，可能就會聯(lián)想到:hover、:active等選擇器。

這里要實(shí)現(xiàn)前置兄弟選擇器很顯然需要聯(lián)系上已有的相鄰兄弟選擇器+和后置選擇器~，都屬于兄弟節(jié)點(diǎn)。

解決思路

其實(shí)有一種方式是很常見的。

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


  標(biāo)簽1
  標(biāo)簽2
  說明
  標(biāo)簽3
  標(biāo)簽4

我們用到了后置選擇器~，其實(shí)這里上述規(guī)定的位置關(guān)系都是以html文檔中的位置為準(zhǔn)的。

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


  標(biāo)簽4
  標(biāo)簽3
  說明
  標(biāo)簽2
  標(biāo)簽1

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

比如

a,span{
  float:right
}

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

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

span ~ a{
  color:red
}

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

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

布局和之前一樣


  標(biāo)簽1
  標(biāo)簽2
  說明
  標(biāo)簽3
  標(biāo)簽4

我們可以這樣來實(shí)現(xiàn)，先把所有的a都設(shè)置為紅色，然后把span后面的a還原，不就達(dá)到目的了嗎？

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

同樣也實(shí)現(xiàn)了這樣的目的。

當(dāng)然這只是兩個很簡單的例子，詳細(xì)的實(shí)例可以參考我之前寫過的文章，更接近實(shí)際的需求

用純css實(shí)現(xiàn)打星星效果

用純css實(shí)現(xiàn)打星星效果（二）

css地址選擇器?

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

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

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這種情況下，一般都還是同一個頁面

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

一個需求

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

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

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

類似的想法就是

下面是偽代碼

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

當(dāng)然現(xiàn)在跟地址欄半毛錢的關(guān)系都沒有。

那么，這樣實(shí)現(xiàn)一個地址選擇器?

思路

按照上面的思路，我們先考慮跟地址有關(guān)聯(lián)的選擇器，乍一看，確實(shí)找不到一個合適的

后來突然發(fā)現(xiàn)了:target選擇器，這個是用來選擇當(dāng)前活動的 HTML 錨點(diǎn)的。

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

下面是w3school的示例

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

實(shí)現(xiàn)

那么怎樣實(shí)現(xiàn)我們需要的功能呢？

這里有一個簡單的布局


  演示

如果想實(shí)現(xiàn)http://test.com#dark的功能，那么文檔中就應(yīng)該有個id為dark的元素可以選擇到


  演示

加上id后，就可以實(shí)現(xiàn)類似的功能了

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

這么容易？

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



  演示

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





  演示

然后結(jié)合兄弟選擇器就可以實(shí)現(xiàn)如下效果

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

這里是demo

效果如文章開頭所示。

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

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

小節(jié)

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

更先進(jìn)的css4也將會到來，更多有趣的事情等著我們來發(fā)掘

插一句

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

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

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

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

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

如果喜歡我的博客，可以多多關(guān)注一下，謝謝 ~

云服務(wù)器 GPU云服務(wù)器 css選擇器基礎(chǔ)選擇器css css選擇 js做地址選擇器

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/53229.html

發(fā)表評論

登陸后可評論

0條評論

warnerwu

男|高級講師

我要關(guān)注我要私信

TA的文章

tensorflow數(shù)據(jù)集下載

閱讀 3799·2023-04-26 02:07
海會主機(jī)是什么-主機(jī)和服務(wù)器的區(qū)別是什么？

閱讀 3271·2021-09-22 15:55
騰訊云服務(wù)器2020年6月促銷活動整理,騰訊云最便宜的云服務(wù)器一網(wǎng)打盡

閱讀 2603·2021-07-26 23:38
CSS module 入門

閱讀 3193·2019-08-29 15:16
基于Vue,Vue-router,Vuex的簡書網(wǎng)站模仿

閱讀 2056·2019-08-29 11:16
切圖崽的自我修養(yǎng)－梳理Jquery API

閱讀 1809·2019-08-29 11:00
局域網(wǎng) pm2 離線安裝

閱讀 3686·2019-08-26 18:36
單選多選場景的解決方案集合

閱讀 3221·2019-08-26 13:32

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

突破css選擇器的局限，實(shí)現(xiàn)一個css地址選擇器?

相關(guān)文章