CSS基础之选择器进阶
背景:CSS因为是层叠样式,类似于儿子继承老子,如果儿子喜欢老子的东西,可以继承并继续使用,当然儿子也有可能不喜欢老子给的东西,就要对他继承过来的东西二次修改。如果没有用到这篇文章中所讲到的新知识,那么不出意外的话,可能就只能按照下面的代码实现了。
HTML:
<div class="father">老子喜欢红色
<p class="sun">我是儿子我讨厌红色,我喜欢粉色</p>
</div>
CSS:
.father{
color: red;
}
.sun{
color: pink;
}
通过给儿子也打上标记,然后对他进行修改,否则的话,儿子就会自动继承老子给的红色字体。
注意:
如果我这个项目足够大,是一个村庄而不是一户人家,这个村庄里有很多位父亲和儿子,这时候sun选择器可能就不是那么友好了,每个儿子都有每个儿子的喜好,如果单纯设置儿子那么就把整个村庄的儿子强制性一起统一了,所以这时候如果能指定某位父亲的某位儿子就好了。这时候就需要引入第一个介绍的:
一、后代选择器
格式:“选择器一” + “空格” + “选择器二”
中间用空格隔开。
上面的代码就可以修改成以下形式:
.father .sun{
color: pink;
}
既然是后代选择器,那么就肯定不止儿子,也可以指向孙子,重孙子,你家多能造你就能指定谁(跨辈分)如以下代码:
HTML:
<div class="a">我是爷爷
<p class="b">我是儿子
<div class="c">我是孙子
<div class="d">我是重孙子,我喜欢原谅~</div>
</div>
</p>
</div>
CSS:
.a .d{
color: green;
}
注意:这边不一定非得是类选择器,其他选择器之间也可以配合使用。
二、子代选择器
这位爷爷比较疼自己的孙子重孙子,有啥事都指定自己的儿子来干。
格式:”选择器一“ + “>” + “选择器二”
中间用加号隔开
HTML:
<div class="a">我是爷爷
<p class="b">我是儿子
<div class="c">
我是孙子
<div class="d">我是重孙子,我喜欢原谅~</div>
</div>
</p>
</div>
CSS:
.a>.b{
color: red;
}
三、并集选择器
选择多种选择器进行统一设置。
格式:”选择器一“ + “,” + “选择器二”
中间用逗号隔开,一般建议使用叠罗汉一样的从上往下一行一行写,到时候看的时候方便看,给别人看也看的清爽一点。
HTML:
<div class="aa">熊大</div>
<div class="bb">熊二</div>
<span class="cc">光头强</span>
CSS:
.aa,
.bb,
span{
color: red;
}
四、交集选择器
找到满足条件一又满足条件二的标签进行设置。
格式一般有两种:
”选择器一“ + “选择器二”
中间不能有空格,如果有标签选择器,标签选择器必须写在前面。
HTML:
<div class="banzhang">
<span>一班班长</span>
</div>
<p id="banzhang">
<span>二班班长</span>
</p>
CSS:
div.banzhang{
color: yellow;
}
p#banzhang{
color: blue;
}
五、伪类选择器:
就是当鼠标悬停在某个标签上的时候,这个标签就会做出一系列效果。
格式:
”选择器“:hover
这里贴的代码包含了上面所有的代码:综合起来可以直接拿这个跑一下。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="GB 2312">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>复合选择器</title>
<style>
.father{
color: red;
}
/* .sun{
color: pink;
} */
/* 后代选择器,可以是标签选择器。也可以是其他选择器想结合中间用空格隔开 */
.father .sun{
color: pink;
}
.a .d{
color: green;
}
/* 子代选择器,只包括儿子,用大于号表示 */
.a>.b{
color: red;
}
/* 并集选择器 */
.aa,
.bb,
.cc{
color: red;
}
div.banzhang{
color: yellow;
}
p#banzhang{
color: blue;
}
/* 伪类 */
div:hover{
font-size: 20px;
color: green;
}
</style>
</head>
<body>
<div class="a">我是爷爷
<p class="b">我是儿子
<div class="c">
我是孙子
<div class="d">我是重孙子,我喜欢原谅~</div>
</div>
</p>
</div>
<div class="aa">熊大</div>
<div class="bb">熊二</div>
<span class="cc">光头强</span>
<div class="banzhang">
<span>一班班长</span>
</div>
<p id="banzhang">
<span>二班班长</span>
</p>
</body>
</html>