選擇器能做到更多更細微的指定，來改變自己想要的物件，選擇器中有所謂的父與子，下面的div h1為例，此時就是指定div是h1父親的情況下會給所有子元素的H1變色，還有一個元素是祖先元素，就是父親的父親

    <style>
        div h1{color:red}
        
    </style>

    <div>
        <h1>這是標題</h1>
        <h1>這是標題2</h1>
    </div>
    <h1>這是標題3</h1>

也可以指定類別class的後代

.box h1{color:red}

    <div class="box">
        <h1>這是標題</h1>
        <h1>這是標題2</h1>
    </div>
    <h1>這是標題3</h1>

  .box H1,span{color:red}

H1,span{}:,表示這是並級選擇器，意思是H1跟span是同級的，整串的意思變成 box的所有後代中的h1與span變色，如果不上，而是空白的話會變成 box的後代 div的後代 span變色，意思會完全不一樣

.box>H1{color:red}

    <div class="box">
        <div>
            <h1>這是標題1</h1>
            
        </div>
    </div>

>表示父是box的H1變色，這次給H1在包一層div來看結果

沒有變色的原因是因為這次H1的父元素之是一個空白的div，box是H1的祖先元素，所以這次不會變色

    <div>
        <div  class="box">
            <h1>這是標題1</h1>
        </div>
    </div>

這次box確實是h1的父親就能成功變色了

h1+h1{ color:red }

         <h1>這是標題1</h1>
        <h1>這是標題2</h1>
        <h1>這是標題3</h1>

h1+h1，+表示前者後的第一個元素必須是後者，否則不變色，

可以看到下面兩個H1變色了，這是因為標題2是標題1後的第一個物件且是H1，而標題3因為是標題2後的第一個物件且是H1所以變色

            <h1>這是標題1</h1>
            <span>這是span1</span>
            <h1>這是標題2</h1>

將中間改成span後就都不變色了，這是因為標題1後的第一個元素是span所以不變色，而標題2雖然是H1但它是標題1後的第二個元素所以也不變色

還有一個東西是*，*是通配選擇器，他能夠指定所有的元素

*{color: violet;}

    <h1>這是標題1</h1>
    <span>這是span1</span>
    <p>這是p元素</p>

這是前面提過的優先權，可以看到通配選擇器是全都為0，這是最低的優先權，隨便一個css設定都可以蓋過去