扯點題外話:此時此刻捻撑,我只想說磨隘,這他喵的破項目終于快完事了,修修改改一個月顾患,光一個首頁就重做了兩邊番捂,真是心塞啊,再這樣下去描验,估計下一個上新聞的前端和產品就發(fā)生在我公司了白嘁。
額,最近在刷題膘流,很老的題絮缅,不過還是發(fā)現(xiàn)了兩個以前我自己不知道的有關css的東西,第一個就是利用a標簽的錨點來控制相應元素的選擇器=》:target呼股,IE9以上可以用耕魄,附上官網解釋:# 錨的名稱是在一個文件中鏈接到某個元素的URL。元素被鏈接到目標元素彭谁。:target選擇器可用于當前活動的target元素的樣式吸奴。a標簽的href屬性鏈接的那個標簽:target,然后就可以通過點擊a標簽來控制那個標簽的樣式了缠局,煮個栗子:
上面的代碼大家可以試一試则奥,不過唯一不足的就是a標簽未在URI上加一個#div,也就是錨點狭园,而:target就是利用這個錨點读处,我目前還是找到如何能去掉這個URI上的錨點,所以還是不用的好唱矛,反正多知道一點總是好的罚舱,可以用這個:targegt寫個輪播裝裝B,當然绎谦,這個就得大家自己動腦子想象了管闷,下面將要介紹的還是有點實用性的,不想留給下篇窃肠,所以就在這直接寫了包个,有點長,見諒哈冤留!
利用:checked來實現(xiàn)導航赃蛛,彈窗等效果恃锉。
以往大家寫一些導航,多少會用到JS呕臂,寫個彈窗也是破托,利用JS來操作display等屬性達到這類效果,如果要是可以只寫css不動JS也許可以省去不少時間呢歧蒋。
那么:checked就派上用場了土砂,附上官方解釋::checked 選擇器匹配每個選中的輸入元素(僅適用于單選按鈕或復選框)。看到這里一些人可能還是想不到(高手別吐槽我)谜洽,如何利用這個:check來實現(xiàn)這類效果呢萝映?不說廢話。先上圖:
我就不附代碼了阐虚,怪長的序臂,而且寫一遍沒壞處,:checked就是用來控制被鼠標選中radio或者checkbox的input標簽的实束,那么label想必大家都用過奥秆,label可以控制for屬性里面的的id對應的標簽,既然這樣咸灿,咱們把input這個丑陋的家伙隱藏掉构订,然后label現(xiàn)在等同于input,所以點擊label就可以用css的~來控制p標簽避矢,進而改變樣式悼瘾,我這里只是做了個顯隱,更神奇的效果有待大家去探索审胸,不知道我有沒有表達清楚亥宿,請大家見諒吧,對了:checked也是IE9以上可以用砂沛,雖然說上述的兩個屬性可以做出來某些你想要的效果烫扼,但是畢竟本篇文章是奇技淫巧,偶爾用下還可以尺上,但是該用JS還是老老實實用JS吧材蛛,規(guī)范同樣很重要圆到。加油怎抛,干吧得。
以上均個人理解芽淡,為了自己鞏固马绝,也為了分享給大家,寫的或好或壞挣菲,希望大家見諒富稻,摸摸大掷邦!