css复杂选择器

一.父子选择器或派生选择器

父子选择器作用：

通过元素的平级关系来匹配其他元素

只能向后不能向前

1.wrapper下box下的em标签里的123变红

HTML

<div class="wrapper">
        <strong class="box">
            <em>123</em>
        </strong>
    </div>
    <em>234</em> 

CSS

wrapper .box em{
    background-color: red;
}

2.div标签里的所有em标签都变蓝

HTML

<div>
    <em>1</em>
    <strong>
        <em>2</em>
    </strong>
 </div>

CSS

div em{
    background-color: blue;
}

3.父子选择器/派生选择器 不一定非要标签，用其他也能代替

<div>  
 <strong>      
 <em>123</em>  
 </strong>
 </div>
 <em>234</em> 
 
 div strong em {    background-color: red;} 

4.并列选择器 不加空格

同样的标签看权重大小，权重一样后面覆盖前面

 <div>1</div>  
 <div class="demo">2</div>  
 <p class="demo">3</p> 
 
 div.demo{    background-color: red;}

5.分组选择器 用逗号隔开

 <em>1</em>  
 <strong>2</strong>  
 <span>3</span>
 
 em,strong,span{    background-color: red;}

二.直接子元素选择器

div下直接的em标签变色中间隔层的不变

CSS：

div > em{
    background-color: green;
}

2.浏览器的执行顺序是自右向左即从em先开始搜索到div

section div ul li a em{
    background-color: red;
}

三.并列选择器

CSS

div.demo{
    background-color: red;
}

三种情况同时存在的时候优先级比较权重
同行多个选择器权重相加比较即可
权重相同的时候选择后面的选择器

四.分组选择器

1.给多个不同标签赋予相同属性

HTML

<em>1</em>
<strong>2</strong>
<span>3</span>

CSS:

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