无空格,选择的元素既有.box类,也有.p类
<style>
.box.p{
font-weight:bold;
color:red;
}
</style>
<body>
<div class="box">
<div class="p">
1
</div>
<div class="p2">
2
<div class="p">
3
<div class="box p">
4
</div>
</div>
</div>
</div>
</body>
有空格,选择.box下含有.p的子节点,子包括儿子节点、孙子节点
<style>
.box .p{
font-weight:bold;
color:red;
}
</style>
<body>
<div class="box">
<div class="p">
1
</div>
<div class="p2">
2
<div class="p">
3
<div class="box p">
4
</div>
</div>
</div>
</div>
</body>
大于号,选择.box下含有.p的子节点
<style>
.box>.p{
font-weight:bold;
color:red;
}
</style>
<body>
<div class="box">
<div class="p">
1
</div>
<div class="p2">
2
<div class="p">
3
<div class="box p">
4
</div>
</div>
</div>
</div>
</body>