【前端基础】8、CSS的选择器

一、什么是选择器?

根据一定的规则选出符合条件的HTML元素,从而为他们添加各种特定的样式。

二、选择器分类

  1. 通用选择器
  2. 元素选择器
  3. 类选择器
  4. id选择器
  5. 属性选择器
  6. 后代选择器
  7. 兄弟选择器
  8. 选择器组
  9. 伪类

三、通用选择器(*

作用:帮我们选中所有的元素。
*就是通配符一样的,它会匹配所有元素。包括html元素
在这里插入图片描述

一般实际操作中不使用。
因为它会把所有元素都匹配一边,哪怕你的HTML文件中都没有用到的元素。

四、元素选择器

使用元素的名称。
在这里插入图片描述

五、类选择器

使用.class名。也就是:.类名
所有使用这个class名的元素都会有同一个样式。
但是因为css的层叠特性等等,所有不一定是所有的样式会有这个样式,会存在覆盖。
在这里插入图片描述

六、id选择器

使用#id名。同一个HTML中就一个id。保持唯一性。

在这里插入图片描述
在这里插入图片描述

七、属性选择器

在这里插入图片描述

例子:
在这里插入图片描述
在这里插入图片描述

八、后代选择器

1、所有后代
在这里插入图片描述

例子:

  1. HTML结构
    在这里插入图片描述
  2. 目标:选择home下的span
    在这里插入图片描述
  3. 结果
    在这里插入图片描述
    1、只有一个后代(直接子代)。
    在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

小米网站中的示例:
在这里插入图片描述

九、兄弟选择器

在这里插入图片描述
例子:
在这里插入图片描述
在这里插入图片描述

十、选择器组

  1. 交集选择器
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

  2. 并集选择器
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

十一、伪类(非常粗略的描述)

  1. 什么是伪类
    选择器的一种,用于选择处于特定状态的元素。
    最常见的现象:鼠标放在某些文字上面,文字就会加上颜色。
    鼠标没放上去之前:
    在这里插入图片描述
    鼠标放上去之后:
    在这里插入图片描述

  2. 常见伪类
    最最常用: :hover ,其他的,需要就查吧。
    在这里插入图片描述
    其他博客1
    其他博客2
    其他博客3

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值