优选
优选
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后面的所有的元素
页面效果
关系选择器我们经常使用，因为
扫一扫
1256
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
