css3新增的選擇器，box在HTML中的意思？

這是個CSS的相鄰?fù)x擇器。 .box + .box 意思就是：選擇緊鄰第一個box元素的同胞box元素。 這倆類名一樣，解釋起來有點混亂。 我舉個例子。 例如： 標(biāo)題 標(biāo)題

文章段落

如果我這么寫：.box1 + h1 ,那么我選擇的就是類名叫.h1-1的元素。 如果：.box2 + h1 ,它不會選擇任何元素，因為.box2的下面沒有一個叫h1的同胞元素。 如果：h1 + div ,那么會選擇.box2的div元素。 第一個元素 + 第二個元素 這個選擇器只會選擇 緊鄰第一個元素 并且是在第一個元素下面的同胞級元素 上面那段代碼，如果你寫 ：.box1 + .box2 將沒有效果，因為他們中間夾了個h1元素。 但是有一個選擇器可以實現(xiàn)，就是.box1 ~ .box2 同胞選擇器。 能力有限，不知幫到了嗎？

偽選擇器怎么設(shè)計字體？

材料/工具：電腦、DW軟件1、首先在電腦上打開DW軟件，然后創(chuàng)建站點和HTML文件。2、然后點擊上面的工具欄的拆分，在右邊的編輯欄上輸入一段文字。3、然后選擇這一段文字，在點擊下面CSS窗口。4、然后在目標(biāo)規(guī)則框中，選擇新建CSS規(guī)則，再選擇字體的顏色為藍(lán)色。5、然后就會出現(xiàn)一個窗口，填入選擇器名稱。6、然后在左邊的代碼框加入<marqueebehavior="alternate"scrollamount="10"></marquee>代碼就可以實現(xiàn)滾動字體。

postcss和cssmodule是什么？

postcss是什么？

根據(jù)官網(wǎng)的解釋，它是一種javascript編寫的工具，用來轉(zhuǎn)化css的。可以認(rèn)為它是處理css的插件集合，需要配合諸如webpack、gulp等編譯工具才能展現(xiàn)它強大的能力。

目前社區(qū)提供了非常多的插件，比較有名的如下：

autoprefixer 可以為css的屬性配置兼容性的前綴，不需要手動添加postcss-preset-env 允許你使用更加現(xiàn)代的css特性stylelint 檢查css語法錯誤cssnano css的壓縮器等等postcss的原理

如果大家了解babel的原理，那就應(yīng)該聽說過AST即抽象語法樹。編譯器將字符串進(jìn)行詞法分析、語法分析，再做轉(zhuǎn)換，最終達(dá)到預(yù)期的結(jié)果。postcss也是同樣的原理，這個包已經(jīng)為使用者提供了解析的方法parse，并且也提供了很多轉(zhuǎn)化的API，利用這些就可以自己開發(fā)一款postcss插件了。

css Module是什么？

先前呢，我們使用css選擇器，它是對整個頁面是有效的，也就是全局的，當(dāng)你每次迭代需求的時候，需要考慮每次添加新的css是否會影響到其他地方，所以我們有時選擇為樣式表添加命名空間。css Module為我們提供了另外一種開發(fā)方式，它可以使css具有局部作用域。

用法如下：

用法是如此的簡單，基本一看就會，css-loader為我們提供了css Module的開關(guān)，只要為css-loader添加參數(shù)選項modules就可以開啟。注意：它必須放在less或者sass的loader之前。

那它如何做到局部作用域的呢？

打開element面板可以發(fā)現(xiàn)，它把class變成了md5戳，對應(yīng)每個組件，保持唯一。

vue的scoped

由此我們聯(lián)想到vue的scoped，它也解決了css局部作用域的問題！

它在dom上生成了一個data屬性，并且給class選擇器添加了屬性選擇器，類似于之前的md5戳。不過由于添加了屬性選擇器，使得選擇器的優(yōu)先級變高了，想在組件外面覆蓋css屬性就變得不那么容易了！

喜歡我的回答就關(guān)注我吧，有問題可以發(fā)表評論，我們一起學(xué)習(xí)，共同成長！

怎么進(jìn)一步提高HTML和CSS的能力？

一些分享，希望對你有幫助：

1 ，先回答你可能遇到的兼容性問題

在以前PC互聯(lián)網(wǎng)時代制作的網(wǎng)站，兼容性的適應(yīng)是前端制作的硬性標(biāo)準(zhǔn)，因為IE7、IE6等低版本的瀏覽器使用的人群不少，兼容性差除了頁面的布局、交互、美觀等受到影響外，重要的是網(wǎng)站拉新、活躍度、轉(zhuǎn)化率指標(biāo)受到嚴(yán)重影響，造成用戶流失。兼容性也是用戶體驗的一部份。

chrome、firefox瀏覽器的容錯糾錯能力是很強大的，本身支持的html標(biāo)簽比IE6、IE7多，隨著IE瀏覽器的升級，目前IE8以上的IE瀏覽器兼容性也與chrome、firefox旗鼓相當(dāng)，瀏覽器對標(biāo)簽支持的請查詢CSS手冊。目前很多公司已放棄IE6、IE7的兼容性，如特殊項目考慮到兼容性建議采用CSS1.0的寫法。

2 ，學(xué)習(xí)方法與方向

其一：互聯(lián)網(wǎng)時代學(xué)習(xí)東西唾手可得。查手冊自學(xué)，如：w3cschool等。熟悉各標(biāo)簽的屬性，對著做練習(xí)，加深對標(biāo)簽的理解。常見的一些html技術(shù)論壇、博客，都是學(xué)習(xí)的地方。

其二：有經(jīng)濟能力與時間的前提下，個人建議報培訓(xùn)班系統(tǒng)的學(xué)習(xí)，學(xué)習(xí)的程度關(guān)鍵還是靠個人的領(lǐng)悟與堅持。師傅領(lǐng)進(jìn)門，修行靠個人。

其三、多做項目。在項目中碰到問題，解決問題才能成長。遇到問題先自己解決，實在沒辦法，向有經(jīng)驗的前端工程師賜教學(xué)習(xí)。記得記筆記，下次碰到這類的問題，處理起來得心應(yīng)手。

其四：多看看各大廠的網(wǎng)頁。如騰訊、阿里的一些網(wǎng)站。扒一下網(wǎng)頁代碼，分析html結(jié)構(gòu)邏輯、規(guī)范化命名、CSS寫法等，總之一句話用最簡潔代碼寫出文件最小、最炫的網(wǎng)頁。

其五：練習(xí)再練習(xí)、多做多總結(jié)。相信經(jīng)過一段時間內(nèi)技術(shù)大幅度得到提升。

當(dāng)下隨著CSS的技術(shù)發(fā)展與迭代，各大廠商的瀏覽器也在不斷地升級換代，來支持兼容CSS各種效果，比如圓角、投影、動畫、選擇器等，使網(wǎng)頁代碼更整潔、文件下載速度更快、界面更美觀等。CSS3動畫與JS的結(jié)合，已代替了大部分flash動畫。

祝你突破技術(shù)瓶頸！

老許說說 2018.3.6