是的，結合簡單的 JS 代碼就可以讓 CSS 做當前頁面的搜索引擎。效果大概就是這樣：

其實呢這個是很早之前我就整了，用來給自己的一些無聊的 demo 或者瞎折騰玩的頁面做索引搜索的。頁面不多，但有時候時間久了就忘了自己曾經折騰過什么頁面，那么搜索就肯定可以起到作用了。

那么這樣一個索引的頁面，怎么才能用最簡單的方式去做搜索的操作呢。想來想去，想到了?:not 這個選擇符。

先看一下這段代碼，很丑很簡陋，但卻完全滿足了我的需求，如果把樣式部分寫得更細致一些的話，那么最終的效果或許會更好吧。

首先這個頁面主要是索引的，唯一的操作就是輸入框中輸入內容后進行頁面檢索，所以，加上了一個 autofocus 屬性，讓輸入框自動獲取焦點。

其次就是加上一個帶有 id 值的 style 標簽，主要的作用就是在 JS 中如果輸入的結果符合的話，那么就讓 CSS 樣式 innerHTML 到這里。

最后就是通過 JS 判斷輸入的內容，如果內容非空，就直接利用 CSS 的 :not 選擇符結合屬性選擇符來顯示最終的輸出結果。

比如，當我們輸入? CSS 這三個字符的時候，在 search_result 這個 style 標簽中內容就會變成：

li?a:not([title*="CSS"])?{ transition:?all?300ms?linear; height:0; display:block; font-size:0;}

這樣就很簡單的了，當 a 標簽中的 title 屬性并沒有包含 CSS 三個字符時候，就設置高度為 0，字體大小為 0；反之就正常顯示。那么也就達到了最終的一個檢索的結果了。

是不是很簡單呢？我覺得是挺簡單的！不過需要注意的是，這里判斷的是 li 標簽下的? a 標簽中的 title 屬性值，那么在寫 HTML 的時候，這個 title 沒有內容就不會有結果了……

總結

以上是生活随笔為你收集整理的js判断最后一个字符是不是指定字符_结合简单的 JS 就可以让 CSS 也能做搜索的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。