關於選擇器，好多人小夥伴只用了最基本的幾個選擇器，感覺這玩意沒有啥學的，講道理，確實也沒啥學的。但是，選擇器種類掌握的越多，編寫代碼起來就會越輕松，為啥呢。舉個例子吧！先上一串代碼和效果，就知道我想表達什麽了！

上面一個五列的li,代碼如下

<style>
        *{margin:0;padding: 0;list-style: none}
        ul{display: flex}
        li{flex: 1;text-align: center;border-left: 1px solid red}
        li:nth-child(1)
 
{
            border-left:none
        }
    </style>
<ul>
        <li>aaa</li>
        <li>bbb</li>
        <li>ccc</li>
        <li>ddd</li>
        <li>eee</li>
</ul>

大家仔細看嗎，這串代碼是給所有的的li一個左邊框一個1px的紅線，然後在用一個選擇器吧第一個li的左邊的線給去掉！這樣做是不是很麻煩，我們有個一個更簡單的方式

*{margin:0;padding: 0;list-style: none}
ul{display: flex}
li{flex: 1;text-align: center;}
li:nth-child(n+2){border-left: 1px solid red}

我們僅僅需要把li:nth-child(n+2)（第二個以及往後的li）給予1px的border-left的紅線，這樣是不是就是很清晰呢？

甜頭嘗到了就開始重洗學習一個css的選擇器吧!

我把css選擇器分成分開成三大板塊，我們依次學習，第一部分是我們是基本選擇器；第二部分是屬性選擇器，第三部分偽類選擇器！

第一部分，基本選擇器

1.通配符選擇器（*）

一般大家都是使用*{margin:0;padding:0}比較多吧，哈哈,通配符的意思就是所有元素，

比如：demo *{color:yellow} 這個意思就是說demo下面所有的元素，字體都是黃色的！！

2.元素選擇器

類似於這樣子 h1{font-size：100px} //意思就是說h1的字體為100px;

3.類選擇器

這樣子 .item{font-size:20px} //意思就是說class="item"的元素字體大小都為20px;

　　3-1.類選擇器可以聯合元素選擇器一起使用，比如

　　　　h1.item{color:red} 　　　　//類名為item的h1的元素都是紅色

　　3-2.類選擇器與類選擇器聯合使用，比如

　　　　item.tel{color:red}　　　　//同時擁有類名 item 和 tel的元素字體為紅色

　　　　**如果元素有一個類名不存在，那麽這個css樣式也無法添加上去

4.id選擇器

#item{ background:red }　　//id為item的元素的背景顏色為紅色

**不同於上面的選擇器，id選擇器是頁面唯一一個值

5.後代選擇器

p a{ color:red }　　　　.//p元素下面的a字體顏色為紅色

6.子代選擇器

p>a{ color:red }　　　　//p元素的所有子元素a顏色為紅絲

**後代選擇器和子代選擇器的區別就是一個是後代選擇器只要是後代都能被選中，而子代選擇器必須是子代才可以，孫子，重孫都不行！

比如

<style>
        .box .item{
            color:red;
        }

        .box>.item{
            background: yellow
        }
</style>
<div class="box">
    <div class="box-samll">
        <div class="item">
                  哈哈
                </div>
    </div>
    <div class="item">
        呵呵
    </div>
</div>            

這段代碼的效果這介樣子

哈哈被這個item包裹擁有了color：red這個屬性

但是呵呵則是擁有了color:red 和background:yellow；這個就不用說太細了，完全能理解了吧。

7.兄弟選擇器 +

p+.item { color:red } //意思跟在p後面的class名為item的元素(不是被p包含，是p後面一個元素！不是被p包含，是p後面一個元素！不是被p包含，是p後面一個元素！)，有沒有覺得用上這個選擇器逼格滿滿。

8.莫慌，這個更有意思 通用兄弟選擇器 ~

p~.item 意思就是p的所有class名為,item的元素 （只要是和p在同一個父級元素下面的所有的類名為item的元素）

9.群選擇器

這個就是給懶人用的，哈哈（selector1,selector2,...,selectorN）；

舉個例子

.frist , .last, .item , #tel{ color:red } //意思就是說，類名為.frist last item 和id為tel的所有元素字體都為紅色

這九種就是基本選擇器，但是6.7.8.9這四類選擇器是不被ie6認可的，很尷尬，在ie6下面無法被識別，很尷尬是不是，但是，不識別就不識別唄，反正現在也不用兼容到ie6。

進本選擇器講完了，溜了，溜了！

關於css選擇器的一些事 第一章 基本選擇器！