首先說下曾經踩過的坑,p:nth-child(1)      匹配的是任何元素的第一子元素p ,(之前把它理解成p下的一個元素)

                                             p:nth-of-type(1)  匹配的是任何元素的所有子元素的第一個p

<div>
    <p>3</p>
    <span>4</span>
    <p>5</p>
    <span>6</span>
</div>

     談到CSS選擇器可能大家最熟悉與常用的就是 標籤、id、class選擇器了，從效率上來說它們三個無疑最高的選擇，我們確實也應優先使用，但在實際開發中，我們可能還有一些友好的選擇器，下面列舉一些常用css選擇器（注意只包括常用有代表性的選擇器，部分少用的未列舉）：

1、基本選擇器，效率最高;  id 、class、標籤、* 通用選擇器

2、組合選擇器，效率相對來基本選擇器來說較低，‘h1,p多類’、‘div  p後代’、‘div>p子’、‘div~p 同級’、‘div+p相鄰（div同級的後一個元素）’選擇器

3、屬性選擇器，效率相對來說又低一層，E[arr]、E[att^=”val”]、E[att$=”val”]、E[att*=”val”]

4、偽類選擇器，效率最低，:hover  :active  :focus  :first-child :checked :enabled :nth-child(n) :nth-of-type(n)

      (E:after E:before E:first-letter E:first-line偽元素）

下面著重介紹選擇器優先順序，我們都是站在巨人的肩膀上做了一些自己的見解，幫助大家更好的理解它

之前看了網上的其它一些部落格，感覺講得都很繁瑣，計算什麼權重，感覺都挺官方的，我在這裡介紹一些常見的、通俗易懂的方法，

<div class="min-screen" id="test" 
 
data-index="tt"></div>

優先順序 行內style>id>class>標籤，  這是網上部落格中一些比較常見的

1、important，大家都知道它的優先順序最高，但我在class和id選擇器中都設定它，則瀏覽器會使用哪個呢（答案是 id），在important存在的情況下，它會跳過important，從優先順序表從下往下比，找到class與id 並比較優先順序

2、

div{background-color: red;}

body div{
    background:black;
}

  背景色是black

3、

.min-screen{
    background-color: green;
}
#test{
    background: blue;
}
div[data-index='tt']{
   background:yellow;
}

顯示yellow

4、

.min-screen{
    background-color: green;
}
div[data-index='tt']{
   background:yellow;
}
div:nth-child(1){
    background:palegreen;
}

5、

.min-screen{
    background-color: green;
}
#test{
    background: blue;
}
.min-screen:hover{
    background:pink ;
}

還有很多組合，和一些其它情況，在這裡我把一些常用的列舉出來，感興趣的可以自己組合選擇器再研究

div{
    width:200px;
height:200px;
background-color: red;
}
.min-screen{
    background-color: green;
}
#test{
    background: blue;
}

div[data-index='tt']{
   background:yellow;
}
div:hover{
    background:pink ;
}
div:nth-child(1){
    background:palegreen;
}
div:last-child{
     background:#f0ad4e;
}
body div{
    background:black;
}
*{
    background:violet;
}
p:nth-of-type(1){
    color:red;
}

總結: 

1、優先順序：important>行內style>id>結構性偽類（eg  :nth-child() ：nth-of-type()）>屬性>類>標籤>通用

2、偽類：hover它的優先順序還和最前面的關鍵字有關（會先比較關鍵字優先順序），上面第五點有詳細說明

3、精確匹配優先順序更高，上面第二點有說明

4、important凌駕於一切之上（儘量少使用），當兩個選擇器都存在它時，則比較選擇第下個優先順序高的，上面第一點有說明

5、動態編寫css,在.css檔案中所有的屬性都無法傳參編寫，可在html 的head中建立style標籤，通過js動態編寫style中的樣式