Father and son selector / descendent selectors
that is owned selector parent-child structure used; whether it is nested layers, are selected
<body>
<div class="wrapper">
<strong class="box">
<em>234</em>
</strong>
</div>
<em>234</em>
</body>
/*父子选择器*/
.wrapper .box em{
background-color:red;
}
Direct child element selectors
direct election of his son, his grandson not vote
<body>
<div class="wrapper">
<em>12</em>
<strong class="box">
<em>234</em>
</strong>
</div>
<em>234</em>
</body>
/*直接子元素选择器*/
div > em{
background-color:red;
}
When father and son traversing the browser selector from right to left to find
Parallel selector
<body>
<div class="wrapper" id="idDiv">
<p class="contrnt" id="idp">
<em class="box" id="only">1<em>
</p>
</div>
</body>
/*并列选择器*/
#idDiv p{
background-color:red;
}
.classDiv .classP
{
background-color:green;
}
/*权重计算*/
#idDiv p 权重值 100+1
.classDiv .classP 10+10
!important + 1 > !important
A packet selector
<body>
<em> 1</em>
<strong> 2</strong>
<span> 3</span>
<div class="demo1"></div>
<div class="demo2"></div>
</body>
em,
strong,
span{
background-color:green;
}
.demo1{
background-color:green;
}
.demo2{
background-color:red;
}
.demo1,
.demo2{
width:100px;
height:100px;
}
