【前端web入门第四天】01 复合选择器与伪类选择器
文章目录:
- 1. 复合选择器
- 1.1 后代选择器
- 1.2 子代选择器
- 1.3 并集选择器
- 1.4 交集选择器(了解)
- 2.伪类选择器
- 2.1 伪类-文本
- 2.2 伪类-超链接（拓展)
1. 复合选择器
什么叫复合选择器?
由两个或多个基础选择器，通过不同的方式组合而成。
复合选择器的作用是什么?
更准确、更高效的选择目标元素（标签)
一个复合选择器的代码案例?
<span>span标签</span>
<div>
<span>文字颜色是绿色</span>
</div>
如何准确的找到复合选择器中某一个选择器的位置,并给他们添加样式呢?
⬇⬇⬇⬇⬇⬇
后代选择器
1.1 后代选择器
后代选择器是干什么的?
选中某元素的后代元素。
选择器的写法是什么?
父选择器 子选择器{ CSS属性}，父子选择器之间用空格隔开。
一个后代选择器的代码案例?
<style>
div span {
color: red;
}
</style>
<span>span标签</span>
<div>
<span>文字颜色是绿色</span>
</div>
注意:
| 后代选择器，选中所有后代,包含儿子、孙子、重孙子... |
我们不想选中那么多,只想选中他的儿子怎么办
⬇⬇⬇⬇⬇⬇
子代选择器
1.2 子代选择器
写法是怎么样的?
后代选择器是 父选择器 子选择器
子代选择器是中间加上一个大于号 父选择器>子选择器
一个子代选择器的代码案例?
<style>
div > span {
color: red;
}
</style>
<span>span标签</span>
<div>
<span>文字颜色是绿色</span>
</div>
多个标签使用相同的样式,缩写代码量的写法
⬇⬇⬇⬇⬇⬇
并集选择器
1.3 并集选择器
并集选择器的作用?
选中多组标签设置相同的样式。
选择器的写法?
选择器1,选择器2,…，选择器N{ CSS属性}，选择器之间用，隔开
<style>
div,
p,
span {
color: red;
}
</style>
<div> div 标签</ div>
<p>p 标签</p>
<span>span 标签</span>
注意:
| 规范书写要逗号换行 |
只想让同一个类的某种标签显示某种样式,而不是这个类的全部
⬇⬇⬇⬇⬇⬇
交集选择器
1.4 交集选择器(了解)
交集选择器的作用?
选中同时满足多个条件的元素。
一个交集选择器的应用场景代码?
<p class="box">p标签,使用了类选择器box</p>
<P>p标签</p>
<div class="box">div标签,使用了类选择器box</div>
我们的目标是让p标签中的box类显示为红色
交集选择器的写法
选择器写法∶选择器1选择器2{CSS属性}，选择器之间连写，用点连接。
p.box{
color: red ;
}
注意:如果交集选择器中有标签选择器，标签选择器必须书写在最前面。
2.伪类选择器
2.1 伪类-文本
伪类选择器有什么用?
鼠标放在哪里,哪里就变色(改变样式),这是hover的用法.
进一步来说,就是可以在交互的过程中,改变样式
鼠标悬停状态的写法?
鼠标悬停状态:选择器:hover { CSS属性}
一个使用hover的代码?
鼠标悬停文字上方会变红
<style>
div:hover{
color: red;
}
</style>
<body>
<div>这是一段文字</div>
</body>
2.2 伪类-超链接（拓展)
超链接一共有四个状态
| 选择器 | 作用 |
|---|---|
| :link | 访问前 |
| :visited | 访问后 |
| :hover | 鼠标悬停 |
| :active | 点击时激活 |
| 如果要给超链接设置以上四个状态，需要按LVHA的顺序书写。 在工作中,一般情况下,只用hover. |