课程概要
这一讲,我们会学习CSS中几种常用的选择器。首先,什么是css选择器?像我们之前的写法,都是直接给标签名设置css,这样会有一个很严重的问题,比如一旦我们给div设置高度为100px,那么所有的div高度都是100px,这种效果肯定不是我们想要的。为了给不同的标签设置不同的样式,就需要选择器。
站长建议:视频只是作为知识点补充,不要一开始就直接看视频,最好是在阅读之后,带着疑问去看视频。
步骤1:ID选择器
先复制下面的代码,作为素材。
<!DOCTYPE html>
<html>
<head>
<title>选择器</title>
</head>
<body>
<ul>
<li>苹果</li>
<li>香蕉</li>
<li>梨子</li>
<ul>
<li>烤山药</li>
<li>酥梨</li>
<li>窝窝头</li>
</ul>
</ul>
</body>
</html>
效果:
image.png
ul 和 li 是无序列表,效果就如图所示,大家可以用调试工具自行验证ul和li分别是行内标签还是块级标签。现在,让我们给ul设置背景色为粉红色。来吧。
<style type="text/css">
ul {
background-color: pink;
}
</style>
image.png
看到了吗,弟兄们,独自占满一整行,是什么标签来着。让我听到你们的答案好吗??
对了,是块级标签!好啦,记住啦,下次类似的标签自己验证咯~
ok,我们继续,现在我希望让苹果的颜色变成红颜色,就可以用ID选择器,看代码:
image.png
懂了吧,这就是ID选择器!有一种,emmm.... , 点对点的意思,ID是唯一的哦~~
image.png
步骤2:类选择器
哇,ID选择器好简单哦~~鼓掌,吧唧吧唧。
什么?你说有没有那种可以一下子选很多的选择器,有啊有啊!快看,它来了,它就是类选择器。比如,现在我要让香蕉和梨子的颜色全部变成黄色,对的,要很黄很黄哦,哈哈!那就需要类选择器啦。看!
image.png
image.png
效果:
image.png
哇,快看,写这段代码的人好帅哦,看这段代码的人更帅~~哈哈哈,学会了吗,这就是类选择器!emmm, 怎么说呢,就是一种分类的概念,好像是一种神奇的徽章,贴上这种徽章的标签就变成了同一个模样。
步骤3:后代选择器
我现在要让烤山药,酥梨和窝窝头字体全部加粗,又该怎么做咧?办法当然有很多啦,比如你可以用ID选择器,一个个设置CSS,也可以用类选择器给这三个标签都加上同一个class。这里单纯为了介绍后代选择器,看代码:
image.png
image.png
image.png
成功啦,好简单哦~~鼓掌,吧唧吧唧。
后代选择器的要点,就是当中有一个空格。有的人可能会问,直接用类选择器不就好了?是的,的确可以,但是,万一别的ul里面也有item的类呢,那样不就把别的item也控制啦吗?用后代选择器的目的其实就是为了精确定位,即:是#list 里面的 .item ,而不是其他的 .item。
步骤4:直接子元素选择器
这个选择器跟后代选择器很像,但是又有不同,刚才的例子,后代选择器能够取到任意子代,也就是说,不管你嵌套了多少层标签,都可以取到。而直接子元素选择器,只能取到下一代。比如我写这样的代码:
#list>li {
font-size: 30px;
}
哇,快看,写这段代码的人好帅哦,看这段代码的人更帅~~效果:
image.png
可以看到,只有第一层的 li 的字体变大了,里面一层的 li 不受影响,这就是直接子元素选择器。(注意,没有空格!)
全部代码:
<!DOCTYPE html>
<html>
<head>
<title>选择器</title>
<style type="text/css">
ul {
background-color: pink;
}
#apple {
color: red;
}
.yellow {
background-color: yellow;
}
#list .item {
font-weight: 600;
}
#list>li {
font-size: 30px;
}
</style>
</head>
<body>
<ul id="list">
<li id="apple">苹果</li>
<li class="yellow">香蕉</li>
<li class="yellow">梨子</li>
<ul>
<li class="item">烤山药</li>
<li class="item">酥梨</li>
<li class="item">窝窝头</li>
</ul>
</ul>
</body>
</html>