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;
}

二.直接子元素选择器

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

HTML

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

CSS

div > em{
    background-color: green;
}

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

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

三.并列选择器

1.使<div class="demo">变色

HTML

<div>1</div>
<div class="demo">2</div>
<p class="demo">3</p>

CSS

div.demo{
    background-color: red;
}

2.复杂选择器的权重比较

HTML

<div class="classDiv" id="idDiv">
        <p class="classP" id="idP">1</p>
</div>

CSS

div #idP{
    background-color: red;
}
#idDiv p{
    background-color: blue
}
.classDiv.classP{
    background-color: pink; 
}

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

四.分组选择器

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

HTML

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

CSS

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