CSS基础(三)

1.CSS组合选择符:CSS选择符它可以很直观的让你明白选择器与选择器之间的关系。

  为什么说是选择器与选择器之间的关系呢?

  因为在平时编写CSS的时候,无法正确的认识到选择器之间的关系就会造成选择器太多太乱,以至于在后面的编写中带来不小的阻力。

  CSS组合选择器中包含各种各样的简单选择器的组合方式。

  而CSS3中主要有四种组合方式:

  - 后代选择器(以空格分隔)

  - 子元素选择器(以大于号分隔)

  - 相邻兄弟选择器(以加号分隔)

  - 普通兄弟选择器(以波浪号分隔)

2.后代选择器:后代选择器可匹配到当前元素中的后代元素中的所以指定元素。

  如下图,选择到的是div元素中的所以的p元素,无论div元素的后代元素中后代元素,还是div元素中的后代元素,都会被改变颜色。

 

             

 

          

3.子元素选择器:子元素选择器与后代选择器不同,子元素选择器只能选择到作为当前元素中的指定的后代元素,并不能像后代元素选择器选择到当前元素中的后代元素中的后代元素中的指定元素

 如下图,仅选择到了div元素中的后代元素的指定元素:

                     

 

4.相邻兄弟选择器:相邻兄弟选择器可以选择到当前元素紧接在另一元素的后代元素,但需要两个元素之间有相同的父级元素。

如下图,选择到是div元素后的第一个p元素:

                       

 

5.普通相邻兄弟选择器:普通相邻兄弟选择器可以选择到所以指定元素的相邻兄弟元素。

如下图,选择到的是div元素之后的所有相邻兄弟元素p:

 

                    

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值