CSS选择器拓展

后代选择器

后代选择器,就是选中某个元素下的子元素,然后对该子元素设置CSS样式。
(父元素与子元素必须用空格隔开,从而表示选中某个元素下的子元素。)
用法:
在这里插入图片描述
浏览器展示效果:
在这里插入图片描述
说明
分析:

“#father1 div{…}”表示选择“id为father1的元素”下的所有div元素;

“#father2 #p1{…}”表示选择“id为father2的元素”下的子元素,其中子元素的id为#p1。因为“id为father2的元素”下的第2个p元素没有被选中,所以第2个p元素内容没有变成红色。

子代选择器

写法: 使用> 进行分隔(只能选择作为某元素 子元素的元素 )

群组选择器

群组选择器,就是同时对几个选择器进行相同的操作。常常,我们的CSS 样式中会有好几个地方需要使用到相同的设定时,一个一个写样式工作量会非常大,重覆性太高且显得冗长,更不好管理…在CSS 语法的基本设定中,就可以把这几个相同设定的选择器合并在一起,原本可能是写了7~8 行相同的语法,合在一起后就只要短短的一小行

在这里插入图片描述
浏览器展示效果:
在这里插入图片描述
对于群组选择器,两个选择器之间必须用“,”(英文逗号)隔开,不然群组选择器无法生效。

伪类选择器

a:link {} 未访问的链接
a:visited {} 已访问的链接
a:hover {} 鼠标移动到链接上
a:active {} 选定的链接
hover伪类的写法:
在这里插入图片描述
浏览器展示效果:
在这里插入图片描述
可以依次对超链接用不同的伪类选择器,看看会产生什么样的效果

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值