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

合集下载
相关主题
  1. 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
  2. 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
  3. 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。

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

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

✓关系选择器

✓动态伪类选择器

✓结构性伪类选择器

✓文字属性

✓段落属性

✓背景属性

✓列表属性

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

一、关系选择器

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

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

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

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

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

代码:

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

我是div的儿子

我是div的儿子

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

代码:

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

我是div的儿子

我是div的儿子

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

代码:

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

我是p的紧邻的元素

我是p后面的所有的元素

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

代码:

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

我是p后面的所有的元素

我是p后面的所有的元素

关系选择器我们经常使用,因为我们写代码的时候,经常这样写:

CSS选择器

我是h3标签

div的h3,p,input标签,第二个div里的h3,p,input标签不一样怎么办,我们不可能再定义很多个类别选择器对吧,所以我们就想到了用关系选择器。来看代码:

CSS选择器