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

afishhhhh 發(fā)布于2019-08-29 17:12 / 593人閱讀

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

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

然后思考一下，用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;}

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

雖然說(shuō)css選擇器有很多種，可以滿足絕大部分的需求，不過(guò)有時(shí)候還是會(huì)有一些看似合理，實(shí)際上比較棘手的問(wèn)題。

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

后代選擇器，可以選擇子元素，卻沒(méi)法選擇父元素。

用另一種思維來(lái)突破局限

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

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

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

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

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

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

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

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

解決思路

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

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


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

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

我們可以手動(dòng)把這些位置顛倒一下


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

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

比如

a,span{
  float:right
}

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

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

span ~ a{
  color:red
}

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

還有一個(gè)思路，可以稱為逆向思維吧

布局和之前一樣


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

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

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

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

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

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

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

css地址選擇器?

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

這里說(shuō)的地址是指瀏覽器的地址欄，比如

http://test.com/a

http://test.com/b

或者

http://test.com#a

http://test.com#b

有人可能覺(jué)得這是個(gè)偽需求，我的地址都變了，都不是同一個(gè)頁(yè)面了，我在不同的頁(yè)面分別寫(xiě)不同的css不就行了？

這個(gè)思路再有些情況是是對(duì)的，有些情況下有的問(wèn)題

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

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

一個(gè)需求

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

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

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

類似的想法就是

下面是偽代碼

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

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

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

思路

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

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

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

下面是w3school的示例

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

實(shí)現(xiàn)

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

這里有一個(gè)簡(jiǎn)單的布局


  演示

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


  演示

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

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

這么容易？

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



  演示

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





  演示

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

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

這里是demo

效果如文章開(kāi)頭所示。

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

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

小節(jié)

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

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

插一句

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

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

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

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

這個(gè)后面會(huì)專門(mén)有一篇文章來(lái)講解，敬請(qǐng)期待

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

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

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

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

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

afishhhhh

男|高級(jí)講師

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

TA的文章

tensorflow如何安裝

閱讀 2884·2023-04-25 17:59
tensorflow對(duì)應(yīng)keras版本

閱讀 712·2023-04-25 15:05
第七章-內(nèi)部類#yyds干貨盤(pán)點(diǎn)#

閱讀 692·2021-11-25 09:43
ESLint v8.0.0 發(fā)布、React 成立 Developer Tooling 團(tuán)隊(duì) | 淘

閱讀 3059·2021-10-12 10:13
FastComet：日本主機(jī)/美國(guó)等全球10大數(shù)據(jù)中心cPanel共享主機(jī)/外貿(mào)主機(jī)年付低至35刀，

閱讀 3573·2021-09-27 13:59
P5 005本地環(huán)境及開(kāi)發(fā)工具

閱讀 3608·2021-09-23 11:21
17.WLAN拓?fù)浣榻B_無(wú)線分布式系統(tǒng)

閱讀 3917·2021-09-08 09:35
突破css選擇器的局限，實(shí)現(xiàn)一個(gè)css地址選擇器?

閱讀 594·2019-08-29 17:12

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

資訊專欄INFORMATION COLUMN

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

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

相關(guān)文章