JS和CSS根本就是兩種東西，按說不應該有交叉之處。我覺得，題主覺得所說的重疊，應該是指兩者的操作“套路”太相近了吧？別看有的書動輒七八百頁，看起來內容很厚重的樣子，但一些關鍵的東西可能都沒有總結出來。我這里就來說說JS和CSS看起來差不多的“套路”，也就是所謂的重疊。

選擇器的套路基本是一致的

由于JS的各種原生getElementBy...選擇器用起來有點繁瑣，我平時更喜歡使用堪稱為JS標配工具的jQuery選擇器。

以最常見的id選擇器為例，CSS中使用的是#id，jQuery中只要使用$函數再將它包起來即可，例如：$('#id')。

再比如，class選擇器，CSS的寫法是.abc，jQuery是$('.abc')；

標簽選擇器，CSS是div，jQuery是$('div')；

屬性選擇器，CSS是[href^="http"]，jQuery是$('[href^="http"]')。

至于其他更復雜的選擇器，如復合選擇器、層次選擇器、偽類選擇器等等都是一樣的用法。因此，完全可以將CSS選擇器和jQuery中的選擇器結合在一起學習。從這個角度來看，它們確實是重復的！

我不明白的是，那些看起來很厚重的所謂專業書，CSS講了一堆選擇器，jQuery中也講了一堆選擇器，為什么不能把它們放在一起？不覺得這樣的書既浪費讀者的時間同時也浪費讀者的金錢么？

在我寫的《B/S項目開發實戰》一書中，關于CSS選擇器的介紹只有一頁半的內容，其它部分全部放到jQuery選擇器中了：

這是因為，只要會了jQuery選擇器，CSS的選擇器用法自然也就會用了，而且功能更強大：

CSS和JS的使用套路也是一致的

絕大部分的專業書都會總結使用CSS樣式的3大方法：一是元素內嵌樣式，也就是以Style屬性直接將樣式寫在元素中；二是文檔內嵌樣式，也就是將聲明的樣式單獨寫在style標簽元素中；三是外部引用樣式，將樣式寫在一個單獨的css文件中，然后通過link標簽引用。

事實上，JS代碼也是同樣的三種方法，但很少有人對此進行總結。例如，下面的寫法就相當于是元素內嵌方式的寫法，因為它僅對當前標簽元素的單擊有效：

<buttononclick="alert('這是彈出的信息')">操作按鈕</button>

文檔內嵌方式就是以<script></script>標簽包起來的一對js代碼；外部引用更直觀，它是以<script>標簽引用的外部js文件。

您說兩者的使用套路是不是一樣？經過這樣對比之后，印象應該更深刻了吧？

我是人民郵電出版社簽約作者，我倡導的是“換一種角度來學習”。歡迎大家關注并留言交流，謝謝！