千锋教育-做有情怀、有良心、有品质的职业教育机构

400-811-9990
手机站
千锋教育

千锋学习站 | 随时随地免费学

千锋教育

扫一扫进入千锋手机站

领取全套视频
千锋教育

关注千锋学习站小程序
随时随地免费学习课程

上海
  • 北京
  • 郑州
  • 武汉
  • 成都
  • 西安
  • 沈阳
  • 广州
  • 南京
  • 深圳
  • 大连
  • 青岛
  • 杭州
  • 重庆
当前位置:武汉千锋IT培训  >  技术干货  >  CSS组合选择器

CSS组合选择器

来源:千锋教育
发布人:qyf
时间: 2022-12-27 16:12:57

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

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

图片 1

  在 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。

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

图片 2

图片 3

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

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

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

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

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

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

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

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

  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>。

  div > p {

  background-color: yellow;

  }

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

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

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

1

  两个组合选择器,后代选择器和子选择器我们就学完了,大家可以尝试变换和优化各种选择器的定义方法,把你认为满意的写法发送到留言区或者社群里,分享给其他的小伙伴吧。大家加油!

声明:本站稿件版权均属千锋教育所有,未经许可不得擅自转载。

猜你喜欢LIKE

javascript中如何搜索数组元素

2023-03-17

ui设计之js效果-如何制作文字倒计时

2023-03-06

svn与git的区别是什么?使用git的优势是什么

2023-03-03

最新文章NEW

java异常分类三大类是什么?

2023-06-06

什么是枚举?没有枚举之前怎么做的

2023-03-17

echarts和chart的优缺点对比

2023-03-09

相关推荐HOT

更多>>

快速通道 更多>>

最新开班信息 更多>>

网友热搜 更多>>