一文教你玩转CSS 组合选择器_CSS教程_CSS_网页制作

来源:脚本之家  责任编辑:小易  

CSS组合选择符包括各种简单选择符的组合方式。

在 CSS3 中包含了四种组合方式:

后代选择器(以空格分隔) 子元素选择器(以大于号分隔) 相邻兄弟选择器(以加号分隔) 普通兄弟选择器(以破折号分隔)

1.后代选择器

后代选择器用于选取某元素的后代元素。

以下实例选取所有 <p> 元素插入到 <div> 元素中:

div p{
      background-color:yellow;
    }

2.子元素选择器

与后代选择器相比,子元素选择器(Child selectors)只能选择作为某元素子元素的元素。

以下实例选择了<div>元素中所有直接子元素 <p> :

 div>p {
      background-color:yellow;
    }

3.相邻兄弟选择器

相邻兄弟选择器(Adjacent sibling selector)可选择紧接在另一元素后的元素,且二者有相同父元素。

如果需要选择紧接在另一个元素后的元素,而且二者有相同的父元素,可以使用相邻兄弟选择器(Adjacent sibling selector)。

以下实例选取了所有位于 <div> 元素后的第一个 <p> 元素:

div+p{
      background-color:yellow;
    }

4.后续兄弟选择器

后续兄弟选择器选取所有指定元素之后的相邻兄弟元素。

以下实例选取了所有 <div> 元素之后的所有相邻兄弟元素 <p> :

div~p {
      background-color:yellow;
    }

到此这篇关于一文教你玩转CSS 组合选择器的文章就介绍到这了,更多相关CSS 组合选择器内容请搜索真格学网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持真格学网!


  • 本文相关:
  • css3选择器新增问题的实现
  • css 选择所有子元素添加样式的方法
  • css选择器中的正则表达式使用
  • css3 新增选择器的实例
  • 怎么使用css制作一个网页代码
  • 完全教程:用外联式CSS做一个网页
  • DW (dreamweaver)网页制作DIV CSS布局详解视频教程
  • 在网页制作中如何使用Css
  • 急!求一套完整的 html+CSS+javascript 的网页设计...
  • 求一个网页制作高手用div+css做一个网页布局 急 谢...
  • 一个网页中如何写出多个CSS样式。又如何使用多个本...
  • 求帮忙啊!用DIV+CSS制作班级网页
  • 用 DIV+CSS制作网页 网址
  • css选择器合并
  • 网站首页网页制作脚本下载服务器操作系统网站运营平面设计媒体动画电脑基础硬件教程网络安全主页网页制作csscss教程选择器组合css选择器中的正则表达式使用css3 新增选择器的实例css教程css3div+css教程web标准教程浏览器兼容教程css布局实例css控制ul li 的样式详解(推荐)html设置超链接字体颜色和点击后的字体颜色div水平垂直居中的完美解决方案css设置各种中文字体如雅黑、黑体、宋体、楷体等等css 文本字体颜色设置方法(css color)css 漂亮搜索框美化代码css自定义select下拉选择框的样式(不用其他标签模拟)css圆角效果 -webkit-border-radius(css3中border-radcss 中的background:transparent到底是什么意思有什么css 首行缩进两个文字一文教你玩转css 组合选择器纯css实现的三种通知栏滚动效果css实现tiktok文字抖动效果示例一文教你玩转css border(边框)css 实现各种 loading 效果附带解析过程如何通过 display:olck/none 完成一个菜单栏300 多行css代码搞定微信 8.0 的炸裂特效css之粘性sticky布局实现题头定位在顶部的方法有趣的css实现隐藏元素的7种思路css实现快速炫酷抖动动画效果
    免责声明 - 关于我们 - 联系我们 - 广告联系 - 友情链接 - 帮助中心 - 频道导航
    Copyright © 2017 www.zgxue.com All Rights Reserved