而不使用css選擇器的第一個，postcss和cssmodule是什么？
postcss是什么？
根據官網的解釋，它是一種javascript編寫的工具，用來轉化css的。可以認為它是處理css的插件集合，需要配合諸如webpack、gulp等編譯工具才能展現它強大的能力。
目前社區提供了非常多的插件，比較有名的如下：
autoprefixer 可以為css的屬性配置兼容性的前綴，不需要手動添加postcss-preset-env 允許你使用更加現代的css特性stylelint 檢查css語法錯誤cssnano css的壓縮器等等postcss的原理如果大家了解babel的原理，那就應該聽說過AST即抽象語法樹。編譯器將字符串進行詞法分析、語法分析，再做轉換，最終達到預期的結果。postcss也是同樣的原理，這個包已經為使用者提供了解析的方法parse，并且也提供了很多轉化的API，利用這些就可以自己開發一款postcss插件了。
css Module是什么？先前呢，我們使用css選擇器，它是對整個頁面是有效的，也就是全局的，當你每次迭代需求的時候，需要考慮每次添加新的css是否會影響到其他地方，所以我們有時選擇為樣式表添加命名空間。css Module為我們提供了另外一種開發方式，它可以使css具有局部作用域。
用法如下：
用法是如此的簡單，基本一看就會，css-loader為我們提供了css Module的開關，只要為css-loader添加參數選項modules就可以開啟。注意：它必須放在less或者sass的loader之前。
那它如何做到局部作用域的呢？
打開element面板可以發現，它把class變成了md5戳，對應每個組件，保持唯一。
vue的scoped由此我們聯想到vue的scoped，它也解決了css局部作用域的問題！
它在dom上生成了一個data屬性，并且給class選擇器添加了屬性選擇器，類似于之前的md5戳。不過由于添加了屬性選擇器，使得選擇器的優先級變高了，想在組件外面覆蓋css屬性就變得不那么容易了！
喜歡我的回答就關注我吧，有問題可以發表評論，我們一起學習，共同成長！
dw中怎么定義新css？
1、在dreamweaver cc中可以直接創建css文件，或在內面內手寫輸入css代碼定義規則等等。
2、如果要使用可視化css編輯，可以使用css設計器，在默認的界面下，在軟件窗口右側的活動窗口內就可以找到css設計器。
例如：新建一個html文件，點擊css設計器的“源”窗口的“+”號，選擇創建css的方式，包括：新建css；附件已有的css或在頁面內創建css樣式。
3、點擊“選擇器“窗口的”+“號，選擇body，可以看到下面的”屬性“窗口內顯示出可以編輯的屬性列表，鼠標點擊相應的屬性就可以選擇或填寫數值進行編輯了，在編輯的時候在”設計“窗口會顯示樣式的變化。
4、最后如果是新建的css文件，保存路徑要正確。
css中選擇器是什么意思？
要使用css對HTML頁面中的元素實現一對一，一對多或者多對一的控制，這就需要用到CSS選擇器。HTML頁面中的元素就是通過CSS選擇器進行控制的。
每一條css樣式定義由兩部分組成，形式如下：[code] 選擇器{樣式} [/code] 在{}之前的部分就是“選擇器”。“選擇器”指明了{}中的“樣式”的作用對象，也就是“樣式”作用于網頁中的哪些元素。
怎樣區分后代選擇器和子代選擇器？
1.第一從符號上來區分后代選擇器：是用空格來分隔開來 例如<h1>一個<span>人</span>的戰爭</h1> 就是h1 span{}子代選擇器：用特殊符號> 例如 h1>span{}
2.第二從用法上區分后代選擇器html部分：<ul class="study"> <li>物理 <ul> <li>力學</li> <li>聲學</li> <li>電磁學</li> </ul> </li> <li>數學 <ul> <li>微積分</li> <li>概率論</li> <li>博弈論</li> </ul> </li> </ul> css部分//使用子代選擇器的效果.study >li{ border:1px solid red;/*只給物理和數學加一個紅色方框*/}//使用后代選擇器的效果.study li{ border:1px solid red;/*給物理 力學 聲學 電磁學 和數學 微積分 概率論博弈論都加一個紅色方框*/}這說明子代是他是單傳只給物理和數學就斷子絕孫，后代是一代傳一代。
子代選擇器時效果圖：
后代選擇器時效果圖：