html5嵌套选择器,HTML5开发培训CSS选择器及文字段落属性和背景属性和列表属性(上)-20210520205100.doc-原创力文档...

优选

优选

PAGE / NUMPAGES

优选

HTML5开发培训CSS选择器及文字段落属性和背景属性和列表属性(上)

我们已经讲了一部分选择器了,今天还要继续讲一些选择器,以便我们能更快的找到页面中的元素并修饰他的样式。另外我们看到页面的标签还需要修饰其它的样式,比如背景图像,文字间距等,所以我们还讲些样式。通过以下几点介绍:

关系选择器

动态伪类选择器

结构性伪类选择器

文字属性

段落属性

背景属性

列表属性

好了,我们先来看一下关系选择器

关系选择器

关系选择器

选择器

功能

E F

后代选择器

E>F

子元素选择器

E+F

选取当前元素后一个兄弟元素

E ~ F

选取当前元素后所有的兄弟元素

好了,我们一一介绍一下:

1.E F:后代选择器,找到页面中相应的的子元素及孙子及重孙子元素,因为这些元素都是后代元素,我们把标签的第一层嵌套的元素叫子元素,再一层嵌套及以后嵌套的元素及子元素都叫后代元素。(当然也是相对的)。后代选择器可以是我们第三章讲过的所有的基本选择器中的一种,我们先理一下元素之间的层次关系。

相关的内容我是div的孙子元素(后代元素),但是我也是p的儿子,这就体现出“相对”了

我是div的儿子,并且我是p紧邻的兄弟元素,我还是p后面的所有的兄弟元素

我是p后面的所有的兄弟元素

好了,了解所有元素之间的关系后,我们就可以通过相关的选择器来改变他们的样式了。

代码:

divspan{

background-color: yellow;

}

相关的内容我是div的孙子元素(后代元素)

我是div的儿子

我是div的儿子

页面效果

2.E>F子元素选择器 找到页面中相应元素的子元素

代码:

divspan{

background-color: yellow;

}

相关的内容我是div的孙子元素(后代元素)

我是div的儿子

我是div的儿子

页面效果

3.E+F 选取当前元素后一个兄弟元素

代码:

p+span{

background-color: yellow;

}

相关的内容我是div的孙子元素(后代元素)

我是p的紧邻的元素

我是p后面的所有的元素

页面代码:

4. E ~ F 选取当前元素后所有的兄弟元素

代码:

p~span{

background-color: yellow;

}

相关的内容我是div的孙子元素(后代元素)

我是p后面的所有的元素

我是p后面的所有的元素

页面效果

关系选择器我们经常使用,因为

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值