本文为CSS常用选择器(上)的后续,其余选择器[请参考前文(https://blog.csdn.net/weixin_44489591/article/details/89739091)
后诉各类选择器均在以下代码基础上进行,代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css"></style>
</head>
<body>
<span class="box1">span</span>
<div class="box1" id="div1">DIV1
<div class="box2">DIV2</div>
<p class="p1">段落</p>
</div>
</body>
</html>
交集选择器(复合…)
格式:选择器1选择器2…选择器n{}
代码示例:
/* 需求:对class为box1的span设置背景色 */
span.box1 {
background-color: aquamarine;
}
效果:
后代选择器
选中指定元素的指定后代元素
格式:祖先元素 后代元素{}
代码示例:
/* 为class为box1的box2设置背景*/
.box1 .box2 {
background-color: red;
}
效果:
子类元素选择器
选中指定元素的指定子元素
格式:父元素 > 子元素{}
代码:
/* 为id为div1的子元素p设置背景颜色 */
#div1 > p{
background-color: yellow;
}
整体代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/* 为所有的class为box1的元素设置背景*/
.box1 {
background-color: lightyellow;
}
/* 需求:对class为box1的span设置背景色 */
span.box1 {
background-color: aquamarine;
}
/* 为class为box1的box2设置背景*/
.box1 .box2 {
background-color: red;
}
/* 为div中的p元素设置字体颜色 */
div p {
color: blue;
}
/* 为id为div1的子元素p设置背景颜色 */
#div1 > p{
background-color: yellow;
}
</style>
</head>
<body>
<span class="box1">span</span>
<div class="box1" id="div1">DIV1
<div class="box2">DIV2</div>
<p class="p1">段落</p>
</div>
</body>
</html>
最终效果图:
