css高级选择器中兄弟选择器

回复

您需要登录才可以下载或查看，没有帐号？立即注册

x

今天学习css高级部分，各类复杂选择器之兄弟选择器

一.兄弟选择器：

用于指定元素的相邻兄弟元素

1.相邻兄弟选择器

1.匹配相邻的元素

2.匹配当前元素【后面】的【一个】元素，前提是两者必须拥有相同父元素

语法：

通过+作为结合体

eg：div+p{

属性:值;

}

复制代码

****注意：只找与当前元素相关的后面一个紧挨着他的兄弟元素，如果符合则匹配，不符合也不会向下查找

2.通用兄弟选择器:

匹配当前元素【后面】的【所有兄弟】元素

语法：

选择器1~选择器2

使用"~"作为结合符 div~p div.first~span.second

****注意：第二个元素不必紧紧跟着第一个元素后面

复制代码

练习,要求：

1.通过指定元素修改兄弟元素字体颜色为红色

2.通过指定元素修改通用元素背景颜色为#ccc

复制代码

[HTML5开发] css高级选择器中兄弟选择器