CSS 相邻兄弟选择器 |
您所在的位置:网站首页 › css标签怎么写 › CSS 相邻兄弟选择器 |
w3school 在线教程
HTML 系列教程
浏览器脚本
服务器脚本
编程教程
XML 系列教程
建站手册
参考手册
CSS 高级教程
CSS 课外书
CSS 简介
CSS 基础语法
CSS 高级语法
CSS 派生选择器
CSS id 选择器
CSS 类选择器
CSS 创建
CSS 背景
CSS 文本
CSS 字体
CSS 列表
CSS 框模型
CSS 框模型概述
CSS 内边距
CSS 边框
CSS 外边距
CSS 外边距合并
CSS 定位
CSS 定位概述
CSS 相对定位
CSS 绝对定位
CSS 浮动
CSS 选择器
CSS 元素选择器
CSS 选择器分组
CSS 类选择器详解
CSS ID 选择器详解
CSS 属性选择器详解
CSS 后代选择器
CSS 子元素选择器
CSS 相邻兄弟选择器
建站手册
网站构建
万维网联盟 (W3C)
浏览器信息
网站品质
语义网
职业规划
网站主机
关于 W3School
帮助 W3School
CSS 相邻兄弟选择器
CSS 子元素选择器
CSS 课外书
相邻兄弟选择器(Adjacent sibling selector)可选择紧接在另一元素后的元素,且二者有相同父元素。 选择相邻兄弟如果需要选择紧接在另一个元素后的元素,而且二者有相同的父元素,可以使用相邻兄弟选择器(Adjacent sibling selector)。 例如,如果要增加紧接在 h1 元素后出现的段落的上边距,可以这样写: h1 + p {margin-top:50px;}这个选择器读作:“选择紧接在 h1 元素后出现的段落,h1 和 p 元素拥有共同的父元素”。 亲自试一试 语法解释相邻兄弟选择器使用了加号(+),即相邻兄弟结合符(Adjacent sibling combinator)。 注释:与子结合符一样,相邻兄弟结合符旁边可以有空白符。 请看下面这个文档树片段: List item 1 List item 2 List item 3 List item 1 List item 2 List item 3在上面的片段中,div 元素中包含两个列表:一个无序列表,一个有序列表,每个列表都包含三个列表项。这两个列表是相邻兄弟,列表项本身也是相邻兄弟。不过,第一个列表中的列表项与第二个列表中的列表项不是相邻兄弟,因为这两组列表项不属于同一父元素(最多只能算堂兄弟)。 请记住,用一个结合符只能选择两个相邻兄弟中的第二个元素。请看下面的选择器: li + li {font-weight:bold;}上面这个选择器只会把列表中的第二个和第三个列表项变为粗体。第一个列表项不受影响。 亲自试一试 结合其他选择器相邻兄弟结合符还可以结合其他结合符: html > body table + ul {margin-top:20px;}这个选择器解释为:选择紧接在 table 元素后出现的所有兄弟 ul 元素,该 table 元素包含在一个 body 元素中,body 元素本身是 html 元素的子元素。 CSS 子元素选择器 CSS 课外书 CSS 参考手册 CSS 实例 CSS 测验 CSS 教程W3School 简体中文版提供的内容仅用于培训和测试,不保证内容的正确性。通过使用本站内容随之而来的风险与本站无关。版权所有,保留一切权利。 使用条款 隐私条款 技术支持:赢科 蒙ICP备06004630号 |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |