css說是調(diào)試工具其實(shí)只是一段 Javascript 代碼，但非常實(shí)用，它會(huì)給頁面里所有的 DOM 元素添加一個(gè) 1px 的描邊（outline），方便我們在調(diào)試 CSS 過程中分析、排查問題。

先來看看代碼，它有兩個(gè)版本，一個(gè)是使用的$$選擇器，代碼量更少（瀏覽器控制臺(tái)支持 $$ 選擇器）；另一種就是傳統(tǒng)的document.querySelectorAll選擇器：

>10 CSS類選擇器也就是選擇html編碼中標(biāo)明為特定Class(類)的元素.如<p Class="mytest">這是我要編輯的段落</p>，在CSS文件中可用 .mytest{ }來表達(dá)想要顯示的樣式。簡單地說，CSS類選擇器用" . "做前綴。

不能

左邊是選擇器首字符，右邊是選擇器后面的字符

首字符支持的字符類型是a～z、A～Z、下劃線（_）以及非ASCII字符（中文、全角字符等）

后面的字符支持的字符類型是a～z、A～Z、0～9、下劃線（_）、短橫線（-）以及非ASCII字符

可以直接以短橫線開頭，如果是一根短橫線（-），那么短橫線后面必須有其他字符、字母或下劃線或者其他編碼字符；如果是連續(xù)兩根短橫線（–），則它的后面不跟任何字符也是合法的。

cssSelector定位，屬于CSS高級(jí)等位，它的定位方式，利用選擇器進(jìn)行的。在CSS 中，選擇器是一種模式，用于選擇需要添加樣式的對象。“CSS” 列指示該屬性是在哪個(gè)CSS 版本中定義的。(CSS1、CSS2 還是CSS3。);

下面羅列了一部分的CSS定位方式。看到這么多是否覺得CSS不再簡單，其實(shí)不然常用的幾種方式作者已標(biāo)記，CSS定位是平常使用過程中非常重要的一種方式。它與Xpath定位有諸多類似的地方，但是無論從性能還是語法上來說CSS都是比較有優(yōu)勢的。

1、一般情況下定位速度要比XPATH快

2、語法比Xpath要簡潔