css复杂选择器

-------------------父子选择器（派生选择器）---------------

html：

    <div>
        <span>123</span>
    </div>
    <span>345</span>

css：

div span{
            background-color:red;
        }

（ps：浏览器在查找父子选择器的时候是从右向左开始查找）

-------------------直接子元素选择器---------------

html：

    <div>
        <span>123</span>

　　<strong>

　　　　<span>456</span>

　　</strong>
    </div>

css：

div > span{
            background-color:red;
        }

-------------------并列选择器---------------

html：

     <div>1</div>
     <span class="demo">123</span>
     <div class="demo">111</div>

css：

div.demo{
            background-color:red;
        }

-------------------分组选择器---------------

html：

     <em>1</em>
     <span>123</span>
     <div>111</div>

css：

em,span,div{
            background-color:red;
        }

-------------------伪类选择器---------------

html：

<a href="">123</a>

css：

a:hover{

　　background-color:red;

}

--------------------------------------------------

（ps：在一个复杂的选择器中，将他们的权重值相加，权重高的优先执行）