零基础教你学前端——57,CSS组合选择器

如果页面结构很复杂,给每个元素设置类名会是很‘头疼’的事情。我们来举个例子。

通过布局和样式,实现这样的页面效果。

在 004 目录下,创建一个 css-combinators.html 文件,构建基本代码。在 body 里添加一个div 元素,在 div 里添加一个 h1 元素,一个 p 元素,一个 h3 元素。

编写 emmet 命令:ol 大于号 小括号 li 大于号 p 乘以 3,补全代码。 ol>(li>p)*3

给各个元素填入相应的文本。

在浏览器里预览页面,基本结构制作完成了。

开始添加样式:在 head 元素里添加 style 元素,定义元素选择器 h1,声明样式 text-align center。定义类选择器 .color,声明样式 color blue。

给 h3 和div里面的三个 p 元素添加 class 属性,值都设置为 color。

再看一下效果,样式都添加好了。

仔细观察,给每个元素都添加了同一个样式类 color,显得很啰嗦。可不可以简洁一些呢?这就要使用组合选择器了。

通过一些特殊符号将多个简单选择器连接起来,就构成了组合选择器。在 CSS 中,组合选择器有四种:

第一种,后代选择器,通过空格连接。

第二种,子选择器,通过大于号(>)连接。

第三种,相邻的兄弟选择器,通过加号(+)连接。

第四种,一般兄弟选择器,通过波浪线(~)连接。

后两个我们在学习CSS3时再详细介绍,本节课我们重点学习前两个。

后代选择器匹配作为指定元素后代的所有元素。这个例子选择了

元素内的所有

元素。

div p {

background-color: yellow;

}

返回代码,我们去掉 h3 元素的 class 属性,这样h3标签里的内容就没有了颜色,现在我们用后代选择器重新给h3的文字加上颜色。定义一个元素选择器 div,空格,再定义一个后代元素 h3,(div h3) 样式声明仍然是 color blue。

去掉三个 p 元素的 class 属性,同样定义一个后代选择器, div 空格 p,(div p) 声明样式 color blue。

h3元素和div里面所有的 p 元素都被添加了蓝色。但我们只想把ol里面的p元素添加上蓝色。

修改一下第二个后代选择器,让它更具体一些,将它变为 div 空格 li 空格 p。 (div li p)

再看一下效果,完美解决了这个问题!

假如我们要给第一个段落加个颜色,通过刚才的实验得知,不能使用后代选择器。我们可以使用子选择器。

子选择器与后代选择器相比,子选择器只能选择,作为某元素的子元素,不能选择到孙子辈的元素。这个例子选择了作为

元素的所有子元素

div > p {

background-color: yellow;

}

返回代码,定义子选择器 div 大于 p,(div > p) 这样,只会找到第一个段落。因为后边的三个段落不是 div 的第一层子元素,所以不会包含他们。声明样式 color red。

回到浏览器,我们要的效果实现了!

最后,给大家总结一下本节课讲解的选择器,大家对着表格练习并消化他们。


两个组合选择器,后代选择器和子选择器我们就学完了,大家可以尝试变换和优化各种选择器的定义方法。

文章配套视频链接:https://www.bilibili.com/vide...

你可能感兴趣的:(html前端)