【前端web入门第四天】01 复合选择器与伪类选择器

文章目录:

  • [1. 复合选择器](#1. 复合选择器)
    • [1.1 后代选择器](#1.1 后代选择器)
    • [1.2 子代选择器](#1.2 子代选择器)
    • [1.3 并集选择器](#1.3 并集选择器)
    • [1.4 交集选择器(了解)](#1.4 交集选择器(了解))
  • 2.伪类选择器
    • [2.1 伪类-文本](#2.1 伪类-文本)
    • [2.2 伪类-超链接(拓展)](#2.2 伪类-超链接(拓展))

1. 复合选择器

什么叫复合选择器?

由两个或多个基础选择器,通过不同的方式组合而成。
复合选择器的作用是什么?

更准确、更高效的选择目标元素(标签)

一个复合选择器的代码案例?

html 复制代码
<span>span标签</span>

<div>
<span>文字颜色是绿色</span>
</div>

如何准确的找到复合选择器中某一个选择器的位置,并给他们添加样式呢?

⬇⬇⬇⬇⬇⬇

后代选择器

1.1 后代选择器

后代选择器是干什么的?

选中某元素的后代元素。
选择器的写法是什么?

父选择器 子选择器{ CSS属性},父子选择器之间用空格隔开。

一个后代选择器的代码案例?

html 复制代码
<style>
	div span {
		color: red;
}
</style>

<span>span标签</span>
<div>
<span>文字颜色是绿色</span>
</div>

注意:

|-----------------------------|
| 后代选择器,选中所有后代,包含儿子、孙子、重孙子... |

我们不想选中那么多,只想选中他的儿子怎么办

⬇⬇⬇⬇⬇⬇

子代选择器

1.2 子代选择器

写法是怎么样的?

后代选择器是 父选择器 子选择器

子代选择器是中间加上一个大于号 父选择器>子选择器

一个子代选择器的代码案例?

html 复制代码
<style>
	div > span {
		color: red;
}
</style>

<span>span标签</span>
<div>
<span>文字颜色是绿色</span>
</div>

多个标签使用相同的样式,缩写代码量的写法

⬇⬇⬇⬇⬇⬇

并集选择器

1.3 并集选择器

并集选择器的作用?

选中多组标签设置相同的样式。
选择器的写法?

选择器1,选择器2,...,选择器N{ CSS属性},选择器之间用,隔开

html 复制代码
<style>
div,
p,
span {
color: red;
}
</style>

<div> div 标签</ div>
<p>p 标签</p>
<span>span 标签</span>

注意:

|-----------|
| 规范书写要逗号换行 |

只想让同一个类的某种标签显示某种样式,而不是这个类的全部

⬇⬇⬇⬇⬇⬇

交集选择器

1.4 交集选择器(了解)

交集选择器的作用?

选中同时满足多个条件的元素。

一个交集选择器的应用场景代码?

html 复制代码
<p class="box">p标签,使用了类选择器box</p>
<P>p标签</p>
<div class="box">div标签,使用了类选择器box</div>

我们的目标是让p标签中的box类显示为红色

交集选择器的写法

选择器写法∶选择器1选择器2{CSS属性},选择器之间连写,用点连接。

html 复制代码
p.box{
color: red ;
}

注意:如果交集选择器中有标签选择器,标签选择器必须书写在最前面。

2.伪类选择器

2.1 伪类-文本

伪类选择器有什么用?

鼠标放在哪里,哪里就变色(改变样式),这是hover的用法.

进一步来说,就是可以在交互的过程中,改变样式
鼠标悬停状态的写法?

鼠标悬停状态:选择器:hover { CSS属性}

一个使用hover的代码?

鼠标悬停文字上方会变红

html 复制代码
 <style>
    div:hover{
        color: red;
    }
    </style>

<body>
<div>这是一段文字</div>
</body>

2.2 伪类-超链接(拓展)

超链接一共有四个状态

选择器 作用
:link 访问前
:visited 访问后
:hover 鼠标悬停
:active 点击时激活

注意:

|---------------------------------------------------|
| 如果要给超链接设置以上四个状态,需要按LVHA的顺序书写。 在工作中,一般情况下,只用hover. |

相关推荐
brzhang4 小时前
我操,终于有人把 AI 大佬们 PUA 程序员的套路给讲明白了!
前端·后端·架构
止观止5 小时前
React虚拟DOM的进化之路
前端·react.js·前端框架·reactjs·react
goms5 小时前
前端项目集成lint-staged
前端·vue·lint-staged
谢尔登5 小时前
【React Natve】NetworkError 和 TouchableOpacity 组件
前端·react.js·前端框架
Lin Hsüeh-ch'in5 小时前
如何彻底禁用 Chrome 自动更新
前端·chrome
augenstern4167 小时前
HTML面试题
前端·html
张可7 小时前
一个KMP/CMP项目的组织结构和集成方式
android·前端·kotlin
G等你下课7 小时前
React 路由懒加载入门:提升首屏性能的第一步
前端·react.js·前端框架
蓝婷儿8 小时前
每天一个前端小知识 Day 27 - WebGL / WebGPU 数据可视化引擎设计与实践
前端·信息可视化·webgl
然我8 小时前
面试官:如何判断元素是否出现过?我:三种哈希方法任你选
前端·javascript·算法